关于eval 与new Function 到底该选哪个?

废话不多说,直接上测试代码


代码如下:

var aa = "{name:'cola',item:[{age:11},{age:22},{age:23},{age:23}]}";
    var now = new Date().getTime();
    for (var i = 0; i < 100000; i++) {
        var a = eval("(" + aa + ")");

}
    var now1 = new Date().getTime();
    document.write("eval 时间为:" + (now1 - now) + "<br/>");

var now2 = new Date().getTime();
    for (var i = 0; i < 100000; i++) {
        var fn = new Function("return" + aa);
        fn();
    }
    var now3 = new Date().getTime();
    document.write("new Function时间为:" + (now3 - now2) + "<br/>");

//经过测试结果 FF效果如下
        //eval 时间为:979
        //new Function时间为:1372

//经过测试结果 IE8效果如下
        //eval 时间为:913
        //new Function时间为:1037

//经过测试结果 Chrome效果如下
        //eval 时间为:211
        //new Function时间为:251

//经过测试结果 Opera
        //eval 时间为:384
        //new Function时间为:1024

测试结果为不同浏览器测试的参考数据,觉得奇怪的是为什么每个浏览器测试的时候都是eval要快点,我们是不是要采用他呢?

亲,先不要急, 接下往下看,带着这些疑问,好奇心的我终于展开了另外一个测试,这时候我做一个动态涵数来分别让eval 和 new Function 来执行再看看效果


代码如下:

var testEval = function (obj) {
         <SPAN style="COLOR: #ff0000"> return eval('0, ' + obj + '');</SPAN>
        //return eval('( ' + obj + ')');
      };

var testFun = function (obj) {
          var fn = new Function("return " + obj);
          fn();
      };

var now = new Date().getTime();
      for (var i = 0; i < 1000; i++) {
          var fn = testEval("function test(){ document.write('我有一头小毛驴,从来也不骑.........'); }");
          fn();
      }
      var now1 = new Date().getTime();
      document.write("<br/>");
      document.write("eval 时间为:" + (now1 - now) + "<br/>");

var now2 = new Date().getTime();
      for (var i = 0; i < 1000; i++) {
          testFun("document.write('我有一头小毛驴,从来也不骑.........');");
      }
      var now3 = new Date().getTime();
      document.write("new Function时间为:" + (now3 - now2) + "<br/>");

//经过测试结果 FF效果如下
        //eval 时间为:495
        //new Function时间为:50

//经过测试结果 IE8效果如下
        //eval 时间为:34
        //new Function时间为:20

//经过测试结果 Chrome效果如下
        //eval 时间为:7
        //new Function时间为:4

//经过测试结果 Opera
        //eval 时间为:7
        //new Function时间为:18

如上结果测试 如果构建一个动态执行让eval去执行 在FF上是超级的慢, 其它浏览器差别不大, 我们这里不必过于太多追究
        return eval('0, ' + obj + ''); 可能大家觉得这里这个 0 是什么意思,加0主要是兼容所有的浏览器,不加的话,IE9以下版本就会报错
        但是真正的0的意思 怎么去剖析 我还真不知道,只是知道加 了这个就可以解决恶心的IE不能兼容的问题
        经过上面二个栗子说明 如果是为了JSON串的转换eval 明显要快, 如果是动态涵数解析 那么 new Function要快, 这里说出了二个优劣势, 还有的就是eval兼容性不很好,如果解析出错,可能会导致其它的JS脚本不会执行,
        而 后者则不会,他只会针对于 这个Function  我这人不喜欢太麻烦的事情, 果断放弃eval 用 new Function 来代替。 如果有理解的不太对的地方,请大家指正,欢迎拍砖。

(0)

相关推荐

  • 关于eval 与new Function 到底该选哪个?

    废话不多说,直接上测试代码 复制代码 代码如下: var aa = "{name:'cola',item:[{age:11},{age:22},{age:23},{age:23}]}";     var now = new Date().getTime();     for (var i = 0; i < 100000; i++) {         var a = eval("(" + aa + ")"); }     var now1

  • IE 当eval遇上function的处理

    情况1:eval里没有function,直接执行: eval("alert('ss');");//所有浏览器正确均输出 情况2:eval里有function,function立即执行: eval("(function(){alert('ss');})();");//所有浏览器正确输出 情况3:eval里有function,使用变量保存function引用并调用该function: var f=eval("(function(){alert('ss');})

  • 邪恶的eval和new Function使用介绍

    代码: 复制代码 代码如下: // 友善提醒:为了你的手指安全,请在Chrome下运行 'alert("hello")'.replace(/.+/, eval); 'alert("hello")'.replace(/.+/, function(m){new Function(m)();}); var i = 0; eval(new Array(101).join('alert(++i);')); var i = 0; new Function(new Array(1

  • javascript使用eval或者new Function进行语法检查

    使用new Function( ) 来进行语法检查 eval( ) 方法是不能乱用的,在不适当的时候使用eval( ) 方法可能导致整个程序都会出问题的: 而new Function( ) 就没这么大问题.虽然new Function( ) 在任何情况下,构造的函数都是在全局作用域下直接工作的,但只作语法检查的话,并不会因为作用域问题而产生意外结果,只要你不直接调用通过它构造的新函数. 在eval( ) 接受的参数前面增加"0," 其实这是由于IE中存在一个bug.出于某种原因,如果你

  • JS中注入eval, Function等系统函数截获动态代码

    现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行. 动态执行js代码无非两种方法,即eval和Function.那么,不管网站加密代码写的多牛,我们只要将这两个方法hook住,即可获取到解密后的可执行js代码. 注意,有些网站会检测eval和Function这两个方法是否原生,因此需要一些小花招来忽悠过去. 挂钩代码 首先是eval的挂钩代码: (function() { if (window._

  • CHECKBOX 的全选、取消及跨页保存的实现方法

    复制代码 代码如下: <script> $(document).ready(function () { /** *全选checkbox */ $(".checkall").live("click", function () { if ($(this).attr("checked") == "checked") {//如果选中 CheckAll(); } else { UnCheckAll(); } UpdateHf

  • jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr

  • Eval and new funciton not the same thing

    1.函数声明式 复制代码 代码如下: function foo(){ //code } 在JS中,函数也是对象,函数对象连接到Function.prototype( Function.prototype连接到Object.prototype) 2.函数字面量式 复制代码 代码如下: var foo = function foo(){ //code } 对象拥有一个连到原型对象的隐藏连接.对象字面量间生的对象连接到Object.prototype. foo.__proto__ == Functio

  • 全选复选框JavaScript编写小结(附代码)

    对于全选框的操作分为两种情况: 1.单击全选框,下面全部选中 2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中. html样式 <tr> <td>爱  好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class=&quo

  • js checkbox(复选框) 使用集锦

    function selectAll() //全选 { var objs = document.getElementsByName('twId'); var i; for(i = 0; i < objs.length; i++) { if(objs[i].type == "checkbox") { objs[i].checked = true; } } } function unselect() //反选 { var objs = document.getElementsByNa

随机推荐