关于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 相关文章推荐
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
详解Javascript实践中的命令模式
May 05 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字符串截取问题
2006/11/28 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现静态服务器
2019/09/05 Python
django框架forms组件用法实例详解
2019/12/10 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
SQL SERVER面试资料
2013/03/30 面试题
纺织工程专业个人求职信范文
2014/01/27 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
员工生日会策划方案
2014/06/14 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
房产公证书
2015/01/23 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js