[正则优化] CSS属性选择符的匹配
正则表达式如下
[s*((?:[wu00c0-uFFFF-]|\.)+)s*(?:(S?=)s*(['"]*)(.*?)3|)s*]
这个正则表达式的作用是用来匹配CSS属性选择符,例如:
/*能匹配成功的*/ [class='abcdefg-abcdefg']
/*匹配失败的*/ [class='abcdefg-abcdefg'
成功匹配的过程如下:
短短的文本却需要匹配451步,效率是比较低的,总结一下大概有以下几个问题:
1. ((?:[wu00c0-uFFFF-]|\.)+) 这一部分表达式是用来匹配属性名称的,+号本身是贪婪匹配的,但是限定在一个分组之后就变成循环了,括号中的表达式会一次次的循环执行,因此效率也就比较低了。
2. (S?=)部分是用来匹配属性关系符的,例如"="、"~="。当匹配的属性关系符的长度是2时,该表达式并没有问题,S?能够成功的匹配第一个关系符,例如"~="中的"~"。但是在匹配"="这样只有一个字符的关系符时,S?= 首先会用S?来匹配"=",而且这个匹配是成功的,之后会再用表达式中的等号继续匹配,但匹配时失败的,这时候需要增加一次回溯来保证匹配成功,因此这里的回溯也是可以优化的。
3. 在匹配属性值时,使用了一个懒惰型的表达式,即(.*?),这也是按字符循环,速度较慢,可以进行优化。
根据以上的问题相应的做出了以下的改进:
1. ((?:[wu00c0-uFFFF-]|\.)+) 这一部分之所以要使用分组是因为属性名中可以包含.这样的字符,在此可以将它视为特殊字符,因此使用(open normal(special normal+)* close)的格式对这部分进行重构,结果为:[wu00c0-uFFFF-]*(\.[wu00c0-uFFFF-]*)*,这可以以最大的步伐匹配字符。
2. (S?=)部分需要排除S?对"="进行匹配的可能性,因此修改为 [^s=]?
3. ([‘"]*)(.*?)3|)匹配属性值的时候之所以使用懒惰匹配是因为使用了反向引用,这里可以使用分组来替换。
根据以上几点做出的修改后,结果如下:
[s*((?:[wu00c0-uFFFF-]*(?:\.[wu00c0-uFFFF-]*)*))s*(?:([^s=]?=) s*('[^'s]]*'|"[^"s]]*"|[^'"s]]*))s*]
使用优化后的表达式匹配上文相同的文本得到的结果如下:
由原来的451步缩减为21步,是一个相当大的提升,这里匹配属性名和属性值时都是最大步伐的消耗掉文本,而且匹配关系符时不再有回溯。
而实际上浏览器的测试结果也验证了这一点:https://jsperf.com/regexp-test-1
结果显示,在匹配成功的情况下,IE、Firefox的性能提升在1倍以上,Chrome下也超过50%。
而在匹配失败的情况下,优化后的表达式也是回溯次数最少的,性能提升在以上case中也有体现,IE和Firefox下的提升高达4-5倍,Chrome下提升2倍左右。
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
博主
有几个问题不明白:
1, 未优化的正则中 \. 是否应为 .
2, 正则匹配过程是怎么的出来的
thanks!
1. 在正则直接量中需要转移
2. 这个是使用RegexBuddy得到的,里面有个Debug
那请问为优化的正则中 \. 是要匹配哪种情况的,能不能举个例子。
谢谢!
借鉴
你的博文真好,虽然有许多我看不大懂!
可恶的回溯^^