eval的两组性能测试数据


Posted in Javascript onAugust 17, 2012

@老赵 的一个微博“ 由eval生成的代码效率真的很差吗? http://t.cn/zWTUBEo 内含人身攻击,不喜勿入。”
引发了最近对eval火爆的讨论,教主 @Franky 和 灰大 @otakustay 也给了精彩的数据分析。
刚好之前也做过类似的测试,我也跟风凑个热闹,提供两组数据供大家参考。

更新1: 感谢灰大 @otakustay 的指导,为排除eval('')调用本身对结果的影响,增加一组新数据A3, B3。并对旧的全部数据重测。
更新2: 感谢莫大 @貘吃馍香 的强力拍砖,增加了1). A4, B4;A5,B5的eval覆盖后的测试数据; 2). A6,B6 eval别名;3). A7,B7 eval.call。

测试环境:
a. 机器:Intel(R) Corei7-2720 2.2Ghz (4核心8线程)、内存8Gb
b. OS:Windows 7 Enterprise SP1 64-bit
c. 浏览器:
b.1 Google Chrome 21.0.1180.79 m
b.2 Firefox 14.0.1
b.3 IE9.0.8112.16421
d. 测试方法
d.1 每个用例测试5次,耗时取最小值。
d.2 测试过程中没有开启Firebug或Chrome Console,开启这些工具会使时间倍增,很难在有效时间内得到该用例结果

用例A1:
我们在内联函数中调用空的eval("")

!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
eval(""); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

用例A2:
注释掉内联函数中的eval("")
!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
//eval(""); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

用例A3:
为排除eval("")调用本身产生的影响,我们在外层函数中调用eval("")
!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
} 
for (var i = 0; i < 2999999; i++) { 
eval(""); 
func(i, i + 1, i + 2); 
} 
}();

用例A4:
将eval()函数覆盖成普通的空函数
function eval(){} 
!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
eval(""); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

用例A5:

同样是函数调用,不是eval而且另一个空函数f

function f(){} 
!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
f(""); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

用例A6:
将eval赋给另一个变量f,然后调用f
var f = eval; 
!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
f(""); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

用例A7:

使用eval.call的方式去调用

!function() { 
var a = 1, 
b = 2, 
c = true; 
function func() { 
var d = 2; 
e = !c; 
eval.call(null, ''); 
} 
for (var i = 0; i < 2999999; i++) { 
func(i, i + 1, i + 2); 
} 
}();

A组测试结果: 

A1 A2 A3 A4 A5 A6 A7 A1 : A2 A1 : A3 A1 : A4 A4 : A5
Chrome 1612ms 8ms 1244ms 897ms 7ms 718ms 680ms 201.5 1.3 1.8 128.1
Firefox 2468ms 69ms 732ms 2928ms 134ms 5033ms 4984ms 35.8 3.4 0.8 21.9
IE 1207ms 23ms 233ms 1147ms 37ms 148ms 224ms 52.5 5.2 1.0 31.0
用例B1:
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
eval(""); 
}(); 
}(); 
}

用例B2:
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
//eval(""); 
}(); 
}(); 
}

用例B3:
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
}(); 
}(); 
eval(""); 
}

用例B4:
var eval = function(){} 
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
eval(""); 
}(); 
}(); 
}

用例B5:
var f = function(){} 
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
f(""); 
}(); 
}(); 
}

用例B6:
var f = eval; 
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
f(""); 
}(); 
}(); 
}

用例B7:
for (var i = 0; i < 2999999; i++) { 
!function() { 
var a = 1, 
b = 2, 
c = true; 
!function () { 
var d = 2; 
e = !c; 
eval.call(null, ''); 
}(); 
}(); 
}

B组测试结果:
B1 B2 B3 B4 B5 B6 B7 B1 : B3 B1 : B2 B1 : B4 B4 : B5
Chrome 1569ms 134ms 1093ms 1022ms 173ms 830ms 916ms 11.7 1.4 1.5 5.9
Firefox 5334ms 1017ms 5503ms 5280ms 1171ms 6797ms 6883ms 5.2 1.0 1.0 4.5
IE 3933ms 560ms 680ms 4118ms 583ms 745ms 854ms 7.0 5.8 1.0 111.3

结论(仅限于文中的CASE):

1.  eval本身的重复调用非常耗时,即使是空的eval("");

2.  eval对内联函数执行效率有所影响,依具体环境、代码有所不同;

3.  我们可以看到无论哪种浏览器,无论是A组还是B组,2 和 5速度较佳。说明例中内联函数的eval无论以何种方式调用(即使eval被空函数覆盖)仍会对运行效率造成较大影响。推断是(黑盒推断,非权威,很可能是臆测)内联函数中只要发现eval,哪怕这个eval是被覆盖的空函数,在Scope Variables中都将会把所有的外部定义的变量等内容初始化到当前的Scope中。类似的,eval会对内联函数在运行时JS引擎的优化功能产生较大影响,降低执行效率。

4. 说点题外话,虽然没用IE10,而是IE9,在对eval的处理上,表现非常的优异。IE一直被开发人员诟病,但它的飞速成长也是值得肯定的,本例就是很好的一项证明。 

更详细的原因剖析下列文章描述已十分详细,不再累述。欢迎拍砖:)尤其是莫大... 

 @老赵          的 《由eval生成的代码效率真的很差吗?》 
 @Franky      的  《Eval科普》 
 @otakustay  的 《浅谈Eval的影响》 

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
javascript五图轮播切换实用版
Aug 17 #Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 #Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 #Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 #Javascript
jquery插件制作 提示框插件实现代码
Aug 17 #Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jquery插件制作 表单验证实现代码
Aug 17 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JavaScript面向对象编程
2008/03/02 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python装饰器用法实例总结
2018/02/07 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python的等深分箱实例
2019/11/22 Python
python和JavaScript哪个容易上手
2020/06/23 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
求职简历自荐信范文
2013/10/21 职场文书
大学生自我评价怎样写好
2013/10/23 职场文书
采购部经理岗位职责
2014/02/10 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
委托书英文
2015/01/28 职场文书
会议简报格式范文
2015/07/20 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
JS中如何优雅的使用async await详解
2021/10/05 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS