`

js FOR循环效率问题

    博客分类：
  • JS
jsfor循环 
阅读更多

 

转自：http://blog.sina.com.cn/s/blog_640738130100tmft.html

引：每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时，效率问题必须重视。在群众，站长提出了这个话题，回去好好想了下，整理出来，大家一起讨论讨论。

 

1. 倒序比正序效率高？

 

听好多人说，倒序效率更高，好吧，做个实验，让事实说话

 

测试代码：

 

  1. <html>
  2. <head>
  3.   <title> New Document </title>
  4.   <script type="text/javascript">
  5.   <!--
  6.                 function test3(){
  7.                 var date1 = new Date();
  8.                 var m;
  9.                 for(var i=0;i<10000000;i++){
  10.                         m = i;
  11.                 }                
  12.                 var date2 = new Date();
  13.                 for(var i=9999999;i>=0;i--){
  14.                         m = i;
  15.                 }
  16.                 var date3 = new Date();
  17.                 r31.value = (date2-date1);
  18.                 r32.value = (date3-date2);                
  19.         }
  20.   //-->
  21.   </script>
  22. </head>
  23.  
  24. <body>
  25. <input type = "button" value="测试3" onclick = "test3()"/>
  26. <input type = "text" id = "r31">
  27. <input type = "text" id = "r32">
  28. </body>
  29. </html>
复制代码


测试结果如下图 test1：
                                                            test1.png 
第一列值为执行正序时间，第二列为倒序执行时间。
可以看出在IE6和IE7中效率基本持平，而在IE8,谷歌浏览器中，倒序反而比正序还要慢，当然这是在js中做的测试
结论：JS的for循环，在IE6,IE7中倒序的效率不比正序高，反而在IE8与谷歌浏览器中正序效率更高。其他浏览器为测试。


2.循环体中，局部变量优化问题
在循环体内部，我们可能会声明一些局部变量（对象）来处理数据。如果变量声明不当，也会影响效率。
看例子

  1. <html>
  2. <head>
  3.   <title> New Document </title>
  4.   <script type="text/javascript">
  5.   <!--
  6.                 function test2(){
  7.                 var date1 = new Date();
  8.                 for(var i =0;i<1000000;i++){
  9.                    var s = new Array();
  10.                         s[0] = 1;
  11.                 }
  12.                 var date2 = new Date();
  13.                 for(var i =0,s = new Array();i<1000000;i++){
  14.                         s[0] = 1;
  15.                 }
  16.                 var date3 = new Date();
  17.                 r21.value = (date2-date1);
  18.                 r22.value = (date3-date2);
  19.         }
  20.   //-->
  21.   </script>
  22. </head>
  23. <body>
  24. <input type = "button" value="测试2" onclick = "test2()"/>  
  25. <input type = "text" id = "r21">
  26. <input type = "text" id = "r22">
  27. </body>
  28. </html>
复制代码


在循环体中，声明了一个数组作为局部变量。
测试结果如下：

test2.png

 

第一列值为在循环体内执行的时间，第二列在起始语句中执行的时间。
可以看出在IE6和IE7中优化的效率接近15倍，在IE8中10倍,谷歌浏览器执行速度快，但也优化了3倍以上，还是在js中做的测试
结论：JS的for循环，在IE6、IE7、E8与谷歌浏览器中通过对局部变量的优化可以成倍的提高执行效率。其他浏览器为测试。

 

补 充：原来都是将局部变量的声明放到for循环外，但站长提醒，这样的话，局部变量的生存周期会变长，直到for的父级执行完后，所占内存才会释放。不过通 过做了几个小例子，没有明显的区别，主要是因为在测试中局部变量占用的内存较少，而且这种局部变量的量也较少，所以效果不明显。

 

 

 

3.条件判断语句中，尽量使用变量来判断而不要去调用方法

 

在for的判断语句中，经常遇到循环变量与某个值进行比较。而这个值经常是list的长度，或者某个数据的大小。虽然这些数据结构有已经定义好的求长求大小的方法。但是每次判断时都会执行一次，也会影响效率。

 

看列子

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.   <title> New Document </title>
  5.   <script type="text/javascript">
  6.   <!--
  7.         function test1(){
  8.                 var date1 = new Date();
  9.                 var array = new Array(1000000);
  10.                 for(var i =0;i<array.length;i++){
  11.                         array[i]=0;
  12.                 }
  13.                 var date2 = new Date();
  14.                 for(var i =0,j=array.length;i<j;i++){
  15.                         array[i]=1;
  16.                 }
  17.                 var date3 = new Date();
  18.                 r11.value = (date2-date1);
  19.                 r12.value = (date3-date2);
  20.         }
  21.   //-->
  22.   </script>
  23. </head>
  24. <body>
  25. <input type = "button" value="测试1" onclick = "test1()"/> 
  26. <input type = "text" id = "r11">
  27. <input type = "text" id = "r12">
  28. </body>
  29. </html>
复制代码

执行结果比较

test3.png

 

 


第一列值为在判断语句中有方法调用执行的时间，第二列在判断语句中使用变量执行的时间。
可以看出在IE6、IE7和IE8中接近4倍,谷歌浏览器执行速度快，但也优化了10倍以上
结论：JS的for循环，在IE6、IE7、E8与谷歌浏览器中通过对判断语句的优化可以成倍的提高执行效率。其他浏览器未测试。


4. 嵌套循环问题
即一个for循环中还嵌套这另一层for循环，可能这种嵌套是多层的。
这个留给大家自己测试，我的测试结果是里外循环次数相差不大。但是有个原则，尽量把循环次数少的写到最外层。


总结：JS的for 循环中，性能的优化主要通过减少循环体中变量的声明和外部方法的调用来实现。例子3中所讲的判断语句的优化其实也是对循环体中外部方法调用的优化。我在写后台时，遇到过在for循环中写SQL的例子，每次循环都访问一次数据库，这个效率是极低的

 

5:js for循环特殊结束方法:  条件区ss=ssss[i]中ssss[2]为undifend

demo:

<script type="text/javascript">
var ssss=[2,2];
        function test(){
             for(var i =0 ,ss; ss=ssss[i]; i++){
                 document.write(i+"<BR>");
                 if(i == 19) {
                     var j = "我是在for语句内部声明的";
                 }
             }
             alert(i)
             alert(j); //output: "我是在for语句内部声明的"
         }
         test();
                    //除此之外，还有一个容易引起错误的地方不能不说，参看一下程序：
        var strTest = "全局变量";
        function test1(){
            alert(strTest);  //output: "undefined"
            //alert(strTesssst);
            var strTest = "看看出错没";
        }
       
        test1();
</script>

分享到：
| JQuery插件让图片旋转任意角度小插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js，java提高编程效率之【for循环优化】.pdf

    js，java提高编程效率之【for循环优化】

    深入探究JavaScript中for循环的效率问题及相关优化

    主要介绍了JavaScript中for循环的效率问题及相关优化,文中谈到了Underscore.js库及循环在各个浏览器js解释器下的表现,需要的朋友可以参考下

    javascript for循环从入门到偏门(效率优化+奇特用法)

    一，for循环的基本写法 代码如下： 代码如下: //例一for(var i=1;i&lt;=10;i++) { alert&#40;i&#41;; } 这段代码太简单了，我都不好意思拿出手。代码的执行结果是依次弹出1到10，PS：在早期的IE如IE6中，你把10改成...

    JavaScript中for循环的几种写法与效率总结

    每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时，效率问题必须重视。下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以...

    javascript for循环性能测试示例

    本文实例讲述了javascript for循环性能测试。分享给大家供大家参考，具体如下： for循环，如何使用效率更高，下面举例来说明： // 先定义一个测试数组 var arr = [0,1,2,3,4,5,6,7,8,9]; // 执行测试 test1(); test...

    js 数组的for循环到底应该怎么写？

    自从开始学编程，自从接触到数组这个东西，我就一直在不同的地点和不同的时间不断看到有人提醒：在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i;i&gt;arr.length;i++)的方式哦，因为用脑子想想也知道，第...

    Javascript-For-Loop-Optimization:Javascript FOR循环优化

    因此，尝试优化Javascript FOR循环，进行一些实验。 先决条件 Create the nums array with some random large numbers. More info in loop.js. var nums = []; for(var i = 0; i&lt;1000;++i) { nums.push(Math....

    深入了解JavaScript中的for循环

    在ECMAScript5（简称ES5）中，有三种for循环，分别是： 简单for循环for-inforEach在2015年6月份发布的ECMAScript6（简称ES6）中，新增了一种循环，是：for-of下面我们就来看看这4种for循环。下面先来看看大家最常见...

    JavaScript执行效率与性能提升方案

    ),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本（平时使用时）等价。 而事实上，如何使用这两个循环，则...

    AngularJS 中的数据源的循环输出

     把数组中的数据循环输出到页面上，如果使用的js的方法的话就是需要对数组进行for循环输出，并且在输出的时候是对页面中的DOM层中的节点进行操作的，而如果使用前端框架的话（angular），它里面已经封装好了数据...

    JavaScript效率调优经验

    1. 将循环次数的定义放到循环体外：这点好像所有的语言都是一样的，在100个元素以上时效果越来越明显。... 将多层对象引用改为更短路径的引用：JavaScript中，这个问题非常明显，如proposalNo域var

    带选择的树型js控件

    带选择框的JS树控件 页面创建一个HTMLElement是很耗时的，...经过测试发现，使用正则匹配的算法检索节点效率比使用for循环要高出很多。 这个效率已经满足一般大数据jstree的需要。 (具体算法，去参考MzTree梅花雪)

    高性能JavaScript循环语句和条件语句

    for-in一般是用在对象属性名的遍历上的，由于每次迭代操作会同时搜索实例本身的属性以及原型链上的属性，所以效率肯定低下；而forEach是基于函数的迭代（需要特别注意的是所有版本的ie都不支持，如果需要可以用...

    Javascript中八种遍历方法的执行速度深度对比

    本篇将带你走进JavaScript遍历的世界, 享受分析JS循环的快感. 本篇所有代码都可以直接运行, 希望您通读本篇后, 不止是浏览, 最好是亲手去实践下. 概述 js有如下两种数据需要经常遍历 数组(Array) 对象(Object) ...

    高性能JavaScript

    3.优化for循环和ifelse条件判断；4.优化字符串郑泽操作；5.用定时器控制ui进程之行栈；6.选择合适的传输类型（json轻量html节省dom效率），用state==3分段解析；7.不要执行字符串，用[],{}直接量，去掉重复的如判断...

    客户端js性能优化小技巧整理

    当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。 2. 如果需要遍历数组，应该先缓存数组长度var len=arr.length; for(i=0;i&lt;len;i++)，将数组长度放入...

    JavaScript学习笔记（十七）js 优化

    一直很迷惑司徒正美为什么对以下的for循环还鄙视， for (var i = 0; i &lt; list.length; i++) { //循环代码 } 看了下面这篇文章终于TM明白了。。。 语言层次方面 循环 在JavaScript中，我们可以使用for(;;),while...

    JavaScript中的集合及效率

    数组是JavaScript提供的一个内部对象，它是一个标准的集合，我们可以添加(push)、删除(shift)里面元素，我们还可以通过for循环遍历里面的元素，那么除了数组我们在JavaScript里还可以有别的集合吗？ 由于JavaScript...

Magicbox
Global site tag (gtag.js) - Google Analytics