关于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提升性能最佳实践小结
Dec 06 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
js实现下拉框二级联动
Dec 04 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python模块之paramiko实例代码
2018/01/31 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python 实现矩阵填充0的例子
2019/11/29 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
自我鉴定范文
2013/11/10 职场文书
网络管理员岗位职责
2015/02/12 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
升职自荐书
2019/05/09 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript