真的有必要为循环优化 JavaScript 吗? [英] Is optimizing JavaScript for loops really necessary?

问题描述

我读到建议通过 <在 JavaScript 中优化循环em>不在循环头中每次迭代都读取数组的长度属性.

I read that it is advised to optimize loops in JavaScript by not reading the length attribute of an array every iteration in the loop header.

所以，我们应该这样做:

So, we should rather do this:

var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){// Read array length once and assign it to a variable
    doSomeThingWith(names[i]);
}

而不是这个:

var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
    doSomeThingWith(names[i]);
}

然而，我创建了一个小测试用例来比较这两种技术，但有时是第一种情况更快，有时是第二个.

However, I created a small testcase to compare the two techniques, but sometimes the first case was faster and sometimes the second one.

您推荐哪个版本?

推荐答案

首先，我应该说这个答案是在 2011 年写的，这些东西随着时间的推移而改变(因为浏览器解释器优化了越来越多的东西)所以如果你真的想要要了解世界的当前状态，您必须在当前浏览器上运行测试.

First, I should say that this answer is written in 2011 and these things change over time (as browser interpreters optimize more and more things) so if you really want to know the current state of the world, you have to run tests on current browsers.

在任何版本的 IE 上运行您的自己的 jsperf 测试.在那里您会看到这两种方法或许多其他旧浏览器之间的一致差异.你显然只在 Chrome 上运行它，它是如此之快，如此优化，以至于这两种方法之间的差异可以忽略不计.在 IE9 上(可能比 IE7 和 IE8 好得多)，预缓存长度的方法快了 31%.

Run your own jsperf test on any version of IE. There you will see a consistent difference between the two methods or many other old browsers. You apparently only ran it on Chrome which is so fast and so optimized that there is a negligible difference between the two methods. On IE9 (which is likely way better than IE7 and IE8), the method which pre-caches the length is 31% faster.

为这个问题设计的 jsperf 测试 给出了这个问题的定量结果.在像这样的问题中，应该去 jsperf 看看真正的区别是什么，而不是那么多的猜测.

A jsperf test designed for this question gives quantitative results on this question. In questions like this one should just go to jsperf to see what the real difference is rather than so much speculation.

它显示了我尝试过的浏览器的差异，从几乎没有差异到相当大的差异取决于浏览器.在 Chrome 中，几乎没有区别.在 IE9 中，先存储长度几乎快了 50%.

It shows a difference in the browsers I tried that ranges from almost no difference to a pretty sizable difference depending upon the browser. In Chrome, there's almost no difference. In IE9, storing the length first is almost 50% faster.

现在，这种速度差异对您的脚本是否重要取决于具体的代码.如果您有一个经常循环的巨大数组，那么在某些浏览器中使用这种形式可能会产生有意义的不同:

Now, whether this speed difference matters to your scripts depends on the specific code. If you had a huge array that you were looping through frequently, it could make a meaningful difference in some browsers to use this form:

for (var i = 0, len = list.length; i < len; i++) {
    // do code here
} 

在稍微不同的测试用例中，当使用实时伪数组时返回通过某些 DOM 函数，速度仍然存在差异，但没有放大(我预计 DOM 伪实时数组的差异会更大，但事实并非如此).

In a slightly different test case when using live pseudo arrays returned by some DOM functions, there was still a difference in speed, but not as magnified (I expected the difference to be greater on DOM pseudo live arrays, but it wasn't).

在实践中，当我认为我的代码部分不是速度关键和/或数组不大时，我倾向于使用短版本(较少输入)并且我会使用预缓存的较长版本如果我有意识地考虑速度，或者数组很大，或者我正在对同一个数组进行大量迭代，则长度会增加.

In practice, I tend to use the short version (less typing) when I don't think my section of code is speed critical and/or the array is not large and I would use the longer version that pre-caches the length if I am consciously thinking about speed or the array is huge or I'm doing a lot of iterations over the same array.

预缓存长度还有其他一些编程原因.如果您将在循环期间将元素添加到数组的末尾，并且您不希望循环遍历那些新添加的元素，那么您将需要预加载长度并且只遍历最初存在的元素.

There are a couple other programming reasons to pre-cache the length. If you will be adding elements to the end of the array during the loop and you don't want to the loop to iterate over those newly added elements, then you will NEED to pre-load the length and only iterate over the initially present elements.

for (var i = 0, len = list.length; i < len; i++) {
    if (list[i] == "whatever") {
        list.push("something");
    }
} 

请记住，浏览器在不断发展并添加越来越多的优化，因此在 2011 年显示出巨大收益的优化可能在未来基本上内置到更现代的浏览器中，因此不再需要手动编码优化.因此，如果您想针对当今的性能优化某些内容，则必须在当今的浏览器中进行测试，而不能仅仅依赖于您阅读的可能已有几年历史的内容.

Keep in mind that browsers are continually evolving and adding more and more optimizations so an optimization that shows great benefit in 2011 may be essentially built into a more modern browser in the future so the hand coded optimization is no longer needed. So, if you're trying to optimize something for today's performance, you have to test in today's browsers, you can't just rely on things you read that may be a few years old.

这篇关于真的有必要为循环优化 JavaScript 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！