首先先上模拟代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var result = createData(); function createData() { var result = []; for (var index = 0; index < 900000; index++) { result.push(index); } return result; } /** * 模拟jquery的each循环 */ function each(arr, fn) { for (var index = 0, len = arr.length; index < len; index++) { fn.call(null, arr[index], index, arr); } } var start = new Date().getTime(); var testNum = 3; // each循环 each(result, function(item) { testNum += item; }); var end = new Date().getTime(); // IE8下1530左右 console.log(end - start); start = new Date().getTime(); testNum = 3; // normal循环 for (var index = 0, len = result.length; index < len; index++) { testNum += result[index]; } end = new Date().getTime(); // IE8下450左右 console.log(end - start); if (Array.prototype.forEach) { start = new Date().getTime(); testNum = 3; result.forEach(function(item) { testNum += item; }); end = new Date().getTime(); // Chrome下60以上 console.log(end - start); } </script> </head> <body> </body> </html>
由于Firefox实在是太快了,所以将900000改成11900000,提高两个数量级。得出的结果是
jquery each:42
native loop:41
html5 foreach:40
在chrome下,11900000次循环
jquery each:260
native loop:92
html5 foreach:771
在ie8下,900000次循环,降低两个数量级
jquery each:1530
native loop:450
html5 foreach:不支持
Why is this result?
从js的实现原理上说,每段function在执行的时候,都会生成一个active object和一个scope chain。
所有当前function内部包含的对象都会放入active object中。
比如function F() {var a = 1;}
这个a就被放入了当前active object中,并且将active object放入了scope chain的顶层,index为0
看下这个例子:
var a = 1; function f1() { var b = 2; function f2() { var c = 3 + b + a; } f2(); } f1();
当f2执行的时候,变量c像之前的那个例子那样被放入scope chain 的index0这个位置上,但是变量b却不是。浏览器要顺着scope chain往上找,到scope chain为1的那个位置找到了变量b。这条法则用在变量a上就变成了,要找到scope chain 的index=2的那个位置上才能找到变量a。
总结一句话:调用位于当前function越远的变量,浏览器调用越是慢。因为scope chain要历经多次遍历。
因此,由于jquery each循环在调用的时候比原生的loop多套了一层function。他的查找速度肯定比原生loop要慢。而firefox的原生forEach循环在内部做了优化,所以他的调用速度几乎和原生loop持平。但是可以看到,在chrome上,html5的原生foreach是最慢的。可能是因为内部多嵌套了几层function。
Conclusion
对于效率为首要目标的项目,务必要用native loop。
相关推荐
For 和 Foreach 的效率问题,先猜一下,再运行一下,看猜的对不对。
主要介绍了jQuery each和js forEach用法,结合实例形式对比分析了jQuery each和js forEach具体使用方法及相关操作注意事项,需要的朋友可以参考下
VB For each循环实例 VB For each循环实例
本文实例讲述了jQuery中each和js中forEach的区别。分享给大家供大家参考,具体如下: [removed] $(function(){ // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数...
利用foreach循环显示数组所有元素,对foreach循环进行更深了解
问题是这样的,通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环。 我是使用 $.each() 进行数组循环遍历,但是当进入判断时,不清楚该如何跳出当前循环,于是我就用 javascript 的方法...
循环语句为众多程序员们提供了很大的便利,有while、do…while、for和 foreach。而且foreach语句很简洁,但是它的优点不仅仅在于此,它的效率也是最高的。本文将详细给大家关于C#中foreach循环对比for循环的优势和...
java中foreach循环的使用方法!
低版本IE数组和HTMLCollection元素集合不兼容forEach循环遍历的处理方法 原生JavaScript通过name获取dom元素得到的是 HTMLCollection元素集合 要想循环遍历可以用forEach,但是在低于ie9的版本下不兼容 var list...
本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考,具体如下: 一、原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项。 ②....
<php+mysql>PHP脚本条件判断,foreach循环,以及粘性表单
Delphi Foreach循环的用法实例,演示如何使用For Each生成循环,用赋值于文本框控件中,程序试图使用多种方式生成Foreach,并最终清除它。本示例面向Delphi基础学者,了解Delphi基础知识的一些应用。
主要介绍了js/jquery遍历对象和数组的方法,结合实例形式分析了数组遍历的forEach,map与each方法常见使用技巧,需要的朋友可以参考下
假设当我们只需知道某个数组有没有某个属性,如果找到了直接跳出循环,省略掉剩下的循环步骤是较优化的操作,但是for中是可以利用break跳出循环,但break在forEach中无效,那么forEach能不能跳出循环呢?当然是可以...
自己写的foreach,绝对可以用。 namespace for_reach循环实例 { class Program { static void Main(string[] args) { int[] a={1,2,3,4,5}; foreach (int x in a)
foreach循环是一种非常常用的循环结构,可以简化对数组的操作和处理,提高代码的效率和可读性。在实际开发中,我们可以使用foreach循环来遍历从数据库中查询出来的数据、用户提交的表单数据等,以便进行进一步的处理...
foreach循环是一种非常常用的循环结构,可以简化对数组的操作和处理,提高代码的效率和可读性。在实际开发中,我们可以使用foreach循环来遍历从数据库中查询出来的数据、用户提交的表单数据等,以便进行进一步的处理...