3. 正则表达式的编译
正则表达式的两个重要阶段是编译和执行。编译发生在正则表达式第一次被创建的时候,而执行则是发生在我们使用编译过的正则表达式进行字符串匹配的时候。
因此,为了性能发面的提升,建议对需要用到的正则表达式采用预定义(预编译)的方式。
// 使用预定义方式
var str = '<a href="http://www.rynxiao.com">rynxiao.com</a>',
reg = /http:\/\/(?:.?\w+)+/,
start_time = new Date().getTime(),
i = 0,
end_time,
duration;
for (; i < 10000000; i++) {
reg.test(str);
}
end_time = new Date().getTime();
duration = end_time - start_time;
console.log(duration);
// 采用临时创建新的正则表达式实例
var str = '<a href="http://www.rynxiao.com">rynxiao.com</a>',
start_time = new Date().getTime(),
i = 0,
end_time,
duration;
for (; i < 10000000; i++) {
/http:\/\/(?:.?\w+)+/.test(str);
}
end_time = new Date().getTime();
duration = end_time - start_time;
console.log(duration);
测试数据(可能不准,但大致上能说明一些问题)
执行次数 | 预编译(ms) | 直接使用(ms) |
---|---|---|
100000 | 18 | 22 |
1000000 | 110 | 151 |
10000000 | 1355 | 1517 |
100000000 | 11395 | 12358 |
另外:用构造器(new RegExp(...))
创建正则表达式的使用。这种技术允许我们,在运行时通过动态创建字符串构建和编译一个正则表达式。对于构建大量重复的复杂表达式来说,这是非常有用的。
<div class="samurai ninja"></div>
<div class="ninja samurai"></div>
<div></div>
<span class="samurai ninja ronin"></span>
<script>
function findClassInElements(className, type) {
var elems = document.getElementsByTagName(type || "*");
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
var results = [];
for (var i = 0; length = elems.length; i < length; i++) {
if (regex.test(elems[i].className)) {
results.push(elems[i]);
}
return results;
}
}
</script>