jQuery的Each比JS原生for循环性能慢许多的缘由_

1、jQuery的Each比JS原生for循环性能慢许多的缘由_ 这篇文章主要介绍了jQuery的Each比JS原生for循环性能慢许多的缘由的相关资料,需要的伴侣可以参考下 其实查看jQuery的源代码，发觉each的代码很简洁，但为什么性能和原生的for循环相差几十倍呢？ jQuery的each的核心代码 for (; i length; i+) value = callback.call(obji, i, obji); if (value = false) break; 看着很简洁，但为什么会慢许多呢？ 编写测试代码如下： var length=300000; function GetArr

2、() var t = ; for (var i = 0; i length; i+) ti = i; return t; function each1(obj, callback) var i = 0; var length = obj.length for (; i length; i+) value = callback(i, obji); /* if ( value = false ) 去掉了推断 break; */ function each2(obj, callback) var i = 0; var length = obj.length for (; i length; i+)

3、value = callback(i, obji);/*去掉了call*/ if (value = false) break; function each3(obj, callback) var i = 0; var length = obj.length for (; i length; i+) value = callback.call(obji, i, obji);/*自己写的call*/ if (value = false) break; function Test1() var t = GetArr(); var date1 = new Date().getTime(); var l

4、engtharr = t.length; var total = 0; each1(t, function (i, n) total += n; ); var date12 = new Date().getTime(); console.log(1Test + (date12 - date1); function Test2() var t = GetArr(); var date1 = new Date().getTime(); var total = 0; each2(t, function (i, n) total += n; ); var date12 = new Date().get

5、Time(); console.log(2Test + (date12 - date1); function Test3() var t = GetArr(); var date1 = new Date().getTime(); var total = 0; each3(t, function (i, n) total += n; ); var date12 = new Date().getTime(); console.log(3Test + (date12 - date1); function Test4() var t = GetArr(); var date1 = new Date()

6、.getTime(); var total = 0; $.each(t, function (i, n) total += n; ); var date12 = new Date().getTime(); console.log(4Test + (date12 - date1); 运行测试，发觉，第一个和其次个相差不是很大，这说明由于break这个推断导致的性能差异很少，但其次个和第三个，第四个偏差就就不止一倍了，而其次个和第三个唯一的区分就是调用了call，看来call会导致性能损失，由于call会切换上下文，当然jQuery的each慢还有其他缘由，它还在循环中调用了其他的方法，call只

7、是一个缘由罢了。 因此可以说call，和apply都是js中比较消耗性能的方法，在性能要求严格时，建议少用。 下面在通过一段代码看下jquery的each和js原生for循环性能对比 html xmlns=l head runat=server titlefor与each性能比较/title script src=./Cks/jquery-1.7.1.min.js type=text/javascript/script script type=text/javascript language=javascript function getSelectLength() var time1 = n

8、ew Date().getTime(); var len = $(#select_test).find(option).length; var selectObj = $(#select_test); for (var i = 0; i len; i+) if (selectObj.get(0).optionsi.text = 111111) selectObj.get(0).optionsi.selected = true; break; var time2 = new Date().getTime(); alert(for循环执行时间： + (time2 - time1); time1 =

9、 new Date().getTime(); $(#select_test).find(option).each(function () if ($(this).text() = 111111) $(this)0.selected = true; ); time2 = new Date().getTime(); alert(each循环执行时间： + (time2 - time1); /script /head body form id=form1 runat=server divselect id=select_test option value=1111111/option option

10、value=2222222/option option value=3333333/option option value=4444444/option option value=55/option option value=66/option option value=77/option option value=88/option option value=99/option option value=1010/option option value=1111/option option value=1212/option option value=1313/option option value=1414/option option value=1515/option option value=1616/option option value=1717/option option value=1818/option option value=1919/option option value=2020/option /selectinput type=but