浅谈js正则字面量//与new RegExp的执行效率

前几天谈了正则匹配 js 字符串的问题：《js 正则学习小记之匹配字符串》 和 《js 正则学习小记之匹配字符串优化篇》。
里面讲到了优化正则起到提升性能的问题，但是能提升多少呢？
于是我去测试了，发现TMD几乎微乎其微，我用1千字符串进行100万次匹配测试，优不优化根本没区别。

这不科学，我白看了这么多天正则，上天这是在玩弄我么。

突然我想到了 compile 方法，然后去测试了下，奇迹出现了，果然优化过的快了不少。

但这是为什么呢？
于是我翻阅资料，在 MDN 上找到了 RegExp Methods
这里说 compile 方法已被弃用！这不科学。。。
在 stackoverflow 上发现这篇文章 Javascript: what's the point of RegExp.compile()?
文章大意是说其实 直接 new RegExp 即可，compile 几乎用不到。
于是乎我修改了代码再来一次。

果然，直接 new RegExp 效果和 compile 是一样的。
不过这只是 nodejs 下的结果，我们去看看各个浏览器下的结果如何吧。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>

<body>
  <script>
    var str1 = '"' + Array(100).join("x") + '123456\\\'78\\\"90"';
    var str2 = '"' + Array(100).join("x") + 'ooo\\\\oooo\\\nxxxx\\\"xxxx"';
     // 这里写100，小一点，防止等半天，FF那怂货就半天
    console.log("字符串1:", str1);
    console.log("字符串2:", str2);

    var reg1 = /"(?:\\.|[^"])*"/;
    var reg2 = /"(?:[^"\\]|\\[\d\D])*"/;

    var reg11 = new RegExp('"(?:\\.|[^"])*"');
    var reg22 = new RegExp('"(?:[^"\\]|\\[\d\D])*"');

    var n = 1e6; //100万次测试

    test("reg1", reg1);
    test("reg2", reg2);
    test("reg11", reg11);
    test("reg22", reg22);

    function test(name, re) {
      console.time(name);
      for (var i = 0; i < n; i++) {
        str1.match(re);
        str2.match(re);
      }
      console.timeEnd(name);
    }
  </script>
</body>
</html>


chrome


firefox


IE11


IE8 (我调用了一个插件模拟控制台实现IE6-8调试输出的)

很明显，第一名是 chrome (以 reg22 那个优化过的为准)，这个号称武装到牙齿的货，果然够new逼。
不过 firefox 这货，竟然连 IE8 都比不过，是不是太怂了点。

优化过的 正则 比没优化的快，那是肯定的。
但是 正则字面量 和 new RegExp 比，那就不是一个档次了。
为什么有如此大的差距呢？
其实我也没搞清楚。

以前看到很多文章都说 字面量 会比 new 对象 形式效率高，但是在正则这里，好像不是这么回事。
不过也不能直接否认这个观点，因为我一直都用字面量的，简洁美观，用着方便才是王道。

我觉得在数据量大，或者重复操作次数多的时候用 new RegExp 是很必要的。
因为你也看到了性能提升这么多。
当然前提条件是你的正则必须优化，正则没优化的情况，两种差不多。
所以优化你的正则，然后用 new RegExp 可以大幅度提升程序的性能。

PS: IE11 是个特例，这货从来不安套路出牌。

好了今天的分享完毕，你们都蠢蠢欲动了吧，快去把正则各种new起来吧。

赞 (0)

相关推荐

  • 浅谈js正则字面量//与new RegExp的执行效率

    前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化篇>. 里面讲到了优化正则起到提升性能的问题,但是能提升多少呢? 于是我去测试了,发现TMD几乎微乎其微,我用1千字符串进行100万次匹配测试,优不优化根本没区别. 这不科学,我白看了这么多天正则,上天这是在玩弄我么. 突然我想到了 compile 方法,然后去测试了下,奇迹出现了,果然优化过的快了不少. 但这是为什么呢? 于是我翻阅资料,在 MDN 上找到了 Reg

  • 浅谈js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal)和 对象字面量(object literal),另外还有函数字面量(function literal). 示例: var test="hello world!"; "hello world!"就是字符串字面量,test是变量名. 二:对象字面量 对象字面量有两种访问方式

  • 浅谈JS正则RegExp对象

    目录 1.RegExp对象 2.语法 2.1 定义 2.2 修饰符 2.3 方括号 2.4 元字符 2.5 量词 2.6 方法 1.RegExp对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 参考教材:w3cschool | JavaScript RegExp 对象 2.语法 2.1 定义 当使用 构造函数 创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \) /* 比如,以下两种方式的定义是等价的 */ // 构造函

  • 浅谈js中同名函数和同名变量的执行问题

    经测试未写成闭包形式的在同一个文件中或者不同的 js 文件中定义的同名函数,调用时会执行后面一个定义的函数.即使这样写也会执行后面一个即会弹出2: <script type="text/javascript"> function t(){ alert(1); } t(); function t(){ alert(2); } </script> 另外,定义的变量与css样式也是以后面的为准. 但是对于函数,经测试这样写却会执行前面的函数直接量即弹出1,暂时不知道是

  • 浅谈js正则之test方法bug篇

    其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西 下面的代码都是在chrome的F12下调试的,大家可以研究一下 先来看个东西吧. var re = /\d/; console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1")

  • 浅谈js中test()函数在正则中的使用

    test() 方法用于检测一个字符串是否匹配某个模式. 返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式. regexp.test(str) 参数 regexp 必选项.包含正则表达式模式或可用标志的正则表达式对象. str    必选项.要在其上测试查找的字符串. 说明 test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false. 每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置. var

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • 浅谈js函数的多种定义方法与区别

    定义一个函数一般有如下三种方式: 1.函数关键字(function)语句: function fnMethodName(x){ alert(x); } 2.函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} 3.Function()构造函数: var fnMethodName = new Function('x', 'alert(x);') 上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常

  • 浅谈js中对象的使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; //此对象中的author属性的值还是一个对象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //创建一个空对象和{}一样 var o4=new Object(); //给对象增加name属性 o4.name='JS' 上面使用了两

随机推荐