`

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 for循环输出

    在压缩包中的"for循环输出"文件可能包含了更多关于`for`循环的实例和练习，例如嵌套循环、条件判断结合的循环等。通过这些案例，你可以进一步理解`for`循环的工作原理，并掌握在不同场景下的应用。 总的来说，`for`...

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

    本文主要讨论了如何优化JavaScript和Java中的for循环，以提高编程效率。 首先，我们来回顾一下传统的for循环语法： ```javascript for(var i = 0; i ; i++) { // 对arrays[i]进行处理 } ``` 这段代码适用于遍...

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

    总之，对于JavaScript中的for循环效率问题，通过理解JavaScript解释器在不同浏览器中的性能表现，利用Underscore.js这样的工具库提供的函数替代低效的传统for循环，是提高代码执行效率和可读性的有效途径。...

    JavaScript中的for循环.pdf

    JavaScript中的for循环是编程语言中一种常用的控制流程结构，它允许程序员在满足特定条件下重复执行一段代码。在JavaScript中，for循环通常用于迭代数组、计算或执行一系列已知次数的操作。 1. **循环控制语句**： ...

    javascript for循环设法提高性能

    总的来说，通过预先存储数组长度、反转循环方向以及适时使用while或do...while循环，我们可以有效地优化JavaScript中的for循环，以提高程序的运行效率。在编写代码时，应根据具体的应用场景和需求来选择最合适的优化...

    js跳出多重循环

    ### JavaScript中的多重循环控制：`break`与`continue` 在JavaScript编程中，循环结构是非常重要的一个组成部分，它能够帮助我们高效地处理重复性任务。在实际应用中，我们经常会遇到需要控制多层嵌套循环的情况，...

    JavaScript for循环 if判断语句(学习笔记)

    效率问题** `switch`语句通常被认为比多层`if...else`结构更高效，因为`switch`在内部使用查找表，而`if...else`则依赖于条件测试。然而，如果条件涉及复杂的布尔表达式，`if...else`可能是更好的选择，因为`switch...

    详解在Vue.js编写更好的v-for循环的6种技巧

    在Vue.js中，v-for循环是模板编程中的关键特性，用于动态渲染列表或者遍历数据。以下六个技巧可以帮助你写出更...通过这些技巧，你可以更好地控制v-for循环，提高代码的效率和可读性，从而编写出更高质量的Vue.js应用。

    jQuery的Each比JS原生for循环性能慢很多的原因

    这里我们探讨的是jQuery的`.each()`方法与JavaScript原生的`for`循环在性能上的差异。 首先，jQuery的`.each()`方法是为了方便开发者遍历对象或数组而设计的，它提供了一个统一的接口来执行回调函数。尽管它的核心...

    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循环的写法与效率,需要的朋友可以...

    JS 测试循环运行的时间

    综上所述，"JS 测试循环运行的时间"这一主题涵盖了JavaScript性能优化的基本方法，包括使用`console.time()`、`console.timeEnd()`和`performance.now()`API来测量代码执行时间，以及分析源码以发现性能问题。...

    js 优化次数过多的循环 考虑到性能问题

    常规情况下，如果我们要生成一千万个随机数，可能会直接在一个for循环中完成： ```javascript var numbers = []; for (var i = 0; i ***; i++) { numbers.push(Math.random()); } ``` 这样的做法虽然简单直接，但...

    在vue中解决提示警告 for循环报错的方法

    最后，针对`for`循环报错的问题，特别是当你的Vue模板中使用`v-for`指令时，可能遇到Vetur（一个用于Vue.js的VSCode插件）发出的验证警告。Vetur默认会检查模板中的语法错误，包括`v-for`指令。如果你不想在模板中...

    100以内的奇数之和JavaScript

    在第一种方法中，我们使用了一个for循环来遍历从1到100的所有整数，并检查每个数是否为奇数。如果是偶数，则跳过该次循环（使用`continue`），继续判断下一个数；如果是奇数，则将其累加到总和中。这种方法的关键...

    js代码-for循环问题

    本篇文章将深入探讨JavaScript中的for循环，以及可能出现的问题及其解决方案。 1. for循环的基本语法 JavaScript中的for循环通常有以下形式： ```javascript for (初始化; 条件; 更新) { // 循环体 } ``` - 初始化...

    javascript 使用for循环时该注意的问题-附问题总结

    然而，在使用for循环的过程中，如果不能正确掌握其使用方法和潜在问题，可能会导致程序运行错误，效率低下，甚至产生安全问题。下面，我们就来深入探讨一下在使用JavaScript的for循环时需要注意的几个重要问题。 ...

    JS简单测试循环运行时间的方法

    本文将详细介绍如何使用简单的测试方法来衡量JavaScript中的for循环、for...in循环以及forEach循环的运行时间。 首先，让我们看下如何进行这种测试。在给出的示例中，创建了一个包含10000000个元素的数组`arr`，并...

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