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


Posted in Javascript onApril 17, 2013

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

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 来代替。 如果有理解的不太对的地方,请大家指正,欢迎拍砖。

Javascript 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
Vue.js表单控件实践
Oct 27 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue实现五子棋游戏
May 28 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 #Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 #Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
jquery表格内容筛选实现思路及代码
Apr 16 #Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
js相册效果代码(点击创建即可)
Apr 16 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python插入排序算法实例分析
2015/07/03 Python
python更新列表的方法
2015/07/28 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
详解python itertools功能
2020/02/07 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
运动会入场解说词
2014/02/07 职场文书
公司贷款承诺书
2014/05/30 职场文书
争先创优公开承诺书
2014/08/30 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
项目验收申请报告
2015/05/15 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python