西红柿爱番茄

Feed Rss

对循环操作的几种优化

01.06.2010, Javascript, by .

下面根据我平时编写代码和浏览其他库的源文件的时候发现的几种对循环操作的优化方法。循环操作可以说在我们平时的编程中是经常会遇到和使用的步骤,大家可能会习以为常的使用一种方式,比如:
[javascript]
//假设arr为一个现成的数组
for(var i=0;i<arr.length;i++){
//……
}
[/javascript]

这种方式是我们最初接触到的原始的方式,这种方式的缺点就是每次循环的时候都需要计算数组的length属性,要知道这个操作在IE的低版本中是很低效率的。

下面我们来看一下另外几种循环方式对循环操作的优化。首先定义一个大数组,方便测试效果明显:
[javascript]
var arr=[];
for(var i=0;i<100000;i++)
arr[i]=i;
[/javascript]
第一种方式:先使用变量储存数组的length属性,这就解决了每次循环需要计算数组的length属性所使用的额外的操作。但是这种优化还不够明显。
[javascript]
for (var i = 0, l = arr.length; i < l; i++) {
if (arr[i] === n)
break;
}
[/javascript]
第二种方式:使用while来循环遍历数组,并使用一个变量来存储数组的每一项并作为判断条件。这种方式比上面第一种方式又优化了许多。变量上面的大数组,基本都是用了0s。它的原理就在于使用变量来存储数组的某一项,并作为循环判断条件,这就少了for循环中的第三个参数设置的索引递增的操作。
[javascript]
var i = -1, c = 0;
while (c = arr[++i])
if (c === n)
break;
[/javascript]
这种方式还有一种变体,如果是从后往前遍历数组,可以使用这样方式:
[javascript]
var i=arr.length;
while(i–){
//….
}
[/javascript]
第三种方式:还是使用for循环来优化,这种方式跟while的原理很相似,都是使用变量来存储数组的某一项并作为判断条件。这种方式的使用时间跟第二种方式基本持平。
[javascript]
for (var i = 0, e; e = arr[i++];)
if (e === n)
break;
[/javascript]
空口无凭,实例作证!请浏览测试网页:TestLoop.html

对循环操作的几种优化 有 7 条回应

  1. 引用: javascript代码性能优化 | Web is dancing

  2. It’s a wonderful work full of meaning and signs….

  3. 第三种方式循环没执行呀

  4. 2010-08-10 在 20:25 Supersha

    多谢指出,现在已经更正……

  5. 測試網頁裡 Style two、Style three 使用的秒數是0
    是因為循環根本沒執行吧!

    另外自己測試過
    for (var i = 100000; i–;)
    這循環的效率是很差的

  6. 抱歉更正一下
    之後又做了一些測試
    在 Fx4 下
    for (var i = 100000; i–;)
    跟一般方法比起來效能差不多!

  7. 2011-03-26 在 23:34 Supersha

    一般来说,使用do…while、while的方式来递减循环,缓存数组的length都是可以起到比较好的优化。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>