`
rainsilence
  • 浏览: 160547 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery的each循环和原生循环及html5foreach循环的效率比较

 
阅读更多

首先先上模拟代码

 

<!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。

 

分享到:
评论
1 楼 sys234 2016-05-05  
[u][/u]

相关推荐

    jQuery each和js forEach用法比较

    在JavaScript和jQuery中,遍历数组或对象是常见的操作,jQuery提供了`each`方法,而JavaScript原生提供了`forEach`方法。接下来我们将深入探讨这两种方法的用法、区别以及应用场景。 **1. jQuery `$.each()`** ...

    jQuery中each和js中forEach的区别分析

    本文将深入分析jQuery中的`each`和JavaScript原生的`forEach`之间的区别。 首先,`forEach`是ECMAScript 5引入的一个数组方法,它允许我们遍历数组中的每个元素。在jQuery中,`each`则是一个更通用的迭代器,不仅...

    原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考,具体如下: 一、原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项。 ②....

    基于jquery循环map功能的代码

    在描述中提到,作者对比了Java中的for循环遍历Map和jQuery的`$.each()`方法,并发现它们在处理类似的数据结构时有相似的效果。 首先,让我们深入了解`$.each()`函数。`$.each()`有两种主要的使用形式。第一种是用于...

    jQuery中$.each()函数的用法引申实例_.docx

    ### jQuery中$.each()函数的深入理解与应用 #### 一、概述 在现代Web开发中,jQuery作为一个非常流行的JavaScript库,提供了丰富的功能和简洁的API来简化HTML文档遍历、事件处理、动画以及Ajax交互等操作。其中,`...

    关于JavaScript中forEach和each用法浅析

    首先,我们要明确forEach和each是JavaScript编程中用于数组遍历的两种方法,它们都是数组对象的方法,用于遍历数组中的每个元素,并对每个元素执行相应的操作。 在JavaScript中,forEach是ES5标准中新增的一个数组...

    精通javascript和jquery代码

    比如,对于大规模的DOM操作,原生的 `forEach` 往往比 jQuery 的 `.each` 更快;在处理动画时,虽然 jQuery 提供了方便的接口,但 CSS3 动画和requestAnimationFrame 在性能上更胜一筹。 实践中,jQuery 通常用于...

    JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    在JavaScript中,数组遍历是常见的操作,有多种方法可以实现,例如`forEach()`和`jQuery.each()`。本文将详细探讨这两个方法在遇到`return false`时的不同行为,并提供一些解决策略。 首先,让我们来看看`jQuery....

    java、python、JavaScript以及jquery循环语句的区别

    此外,Java 5引入了增强型for循环(也称为foreach循环),简化了遍历数组和集合的过程: ```java int[] arr = {1, 2, 3, 4}; for(int element : arr) { System.out.println(element); } ``` Java中的循环控制...

    js和jquery的api

    这里我们将深入探讨 JavaScript(特别是 ECMAScript 5 版本)和 jQuery 1.8.3 的 API,帮助前端开发者更好地理解和运用这些技术。 **JavaScript API** JavaScript 是一种基于对象和事件驱动的脚本语言,广泛用于...

    jquery 模板

    随着前端开发技术的发展,如AngularJS、React和Vue等框架的崛起,以及浏览器原生支持的`&lt;template&gt;`标签和Web Components,jQuery模板的使用逐渐减少。然而,对于学习和理解客户端数据绑定和模板引擎的概念,jQuery...

    原生js实现each方法实例代码详解

    jquery里面有个each方法,将循环操作简化、便捷。 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型。且无法通过return true达到continue效果。 此外还有个every方法,该方法虽然可以实现continue...

    jQuery中$.each()函数的用法引申实例

    在JavaScript的世界里,遍历数据结构是常见的操作,jQuery提供了$.each()函数,它为开发者提供了方便、灵活的方式来遍历数组、...了解并熟练掌握$.each()的使用,将极大地提升你在JavaScript编程中的效率和代码质量。

    jQuery Utilities 分类下的函数(或属性)的实现方式分析

    本文将深入探讨jQuery Utilities分类下的函数(或属性)的实现方式,帮助你更好地理解和利用这些功能,提高你的前端开发效率。 首先,jQuery Utilities包含了各种实用的函数,它们是jQuery库中的基础组成部分,用于...

    JS中的forEach、$.each、map方法推荐

    但需要注意的是,`$.each`不是语言原生的数组方法,而是jQuery库的一部分,这可能会影响其在某些环境下的性能和兼容性。 然后是`map`方法,它的主要目的是创建一个新的数组,新数组的元素是通过调用提供的函数并...

    jquery性能优化

    虽然`$.each()`方便,但原生的`for`循环通常更快。尤其在处理大型数组时,应优先考虑原生循环。 八、利用数组的特性 对于需要遍历的jQuery集合,可以先转换为数组,利用数组的特性进行操作,如`Array.prototype....

    jQuery学习资料

    - jQuery的$.each()用于遍历数组和对象,与JavaScript的for循环或forEach()有所不同。 7. **性能优化** - 使用`$(document).on()`替代直接绑定事件,避免内存泄漏。 - 避免在DOM操作中频繁创建jQuery对象,使用`...

Global site tag (gtag.js) - Google Analytics