Javascript：长度方法有效吗？

Question

我正在做一些 javascript 编码，我想知道长度方法是“预先计算”的，还是被 JS 引擎记住的。

所以，问题是：

如果我经常检查数组长度，并且假设我没有更改它（通过闭包使其不可变），我是否应该预先计算长度方法并将其存储在某个变量中？

谢谢！

Answer 1

一如既往，答案是“视情况而定”。

Let's test native arrays with a million-element array:

for (var i = 0; i < arr.length; i++);

var len=arr.length;
for (var i = 0; i < len; i++);

http://josh3736.net/images/arrlen.png

Chrome 和 Firefox 优化了属性访问器，使其与将长度复制到局部变量一样高效。 IE 和 Opera 不会，而且速度要慢 50% 以上。

然而，请记住，测试结果的“ops/second”是指每秒通过一百万个元素的数组完成的迭代次数。

为了正确看待这一点，即使在 IE8（这组中表现最差的）（在属性访问和局部变量上分别得分 0.44 和 3.9）中，每次迭代的损失也只有 2 µs 。使用array.length 迭代一千多个项目只会花费您额外的 2 毫秒。换句话说：提防过早的优化。

Answer 2

实际数组的长度不是即时计算的。它作为数组数据结构的一部分存储，因此访问它只涉及获取值（没有计算）。因此，它通常与检索对象的任何固定属性一样快。正如你在这个性能测试中看到的，检索数组的长度和检索对象的属性基本上没有区别：

http://jsperf.com/length-comparisons

一个例外是 DOM 从 getElementsByTagName() 或 getElementsByClassName() 等函数返回的 nodeList 对象。在这些情况下，访问长度属性通常要慢得多。这可能是因为这些 nodeList 对象不是真正的 javascript 对象，并且每次从这些对象访问某些内容时都必须跨越 Javascript 和本机代码之间的桥梁。在这种情况下，将长度缓存到局部变量中而不是在 nodeList 的循环中重复使用它会快很多（快 10-100 倍）。我已将其添加到长度比较中，您可以看到它有多慢。

在某些浏览器中，将长度放入局部变量并从那里使用它会明显更快，如果您将一遍又一遍地引用它（例如在循环中）。以下是上述 jsperf 测试的性能图：

Answer 3

所有主要的解释器都为原生数组的长度提供了有效的访问器，但对于像 NodeLists 这样的类数组对象却没有。

"Efficient looping in Javascript"

Test / Browser                Firefox 2.0 Opera 9.1   Internet Explorer 6
Native For-Loop               155 (ms)    121 (ms)    160 (ms)
...
Improved Native While-Loop    120 (ms)    100 (ms)    110 (ms)

"Efficient JavaScript code" 建议

for( var i = 0; i < document.getElementsByTagName('tr').length; i++ ) {
  document.getElementsByTagName('tr')[i].className = 'newclass';
  document.getElementsByTagName('tr')[i].style.color = 'red';
  ...
}

---

var rows = document.getElementsByTagName('tr');
for( var i = 0; i < rows.length; i++ ) {
  rows[i].className = 'newclass';
  rows[i].style.color = 'red';
  ...
}

这些都不是有效的。 getElementsByTagName 返回一个动态对象，而不是静态数组。每次检查循环条件时，Opera 都必须重新评估对象，并计算出它引用了多少元素，以便计算出length 属性。这比检查静态数字需要更多时间。

Answer 4

由于属性查找速度，通过将长度缓存在局部变量中可能会获得适度的速度提升。这可能会或可能不会被忽略，具体取决于 JS 引擎如何 JIT 代码。

请参阅http://jsperf.com/for-loop-caching 了解基本的 JSperf 测试用例。

Answer 5

对于您不会对其长度进行操作的任何集合类型对象（例如，任何不可变集合），最好缓存其长度以获得更好的性能。

var elems = document.getElementsByName("tst");
var elemsLen = elems.length;
var i;
for(i = 0; i < elemsLen; ++i)
{
  // work with elems... example:
  // elems[i].selected = false;
}
elems = [10,20,30,40,50,60,70,80,90,100];
elemsLen = elems.length;
for(i = 0; i < elemsLen; ++i)
{
  // work with elems... example:
  // elems[i] = elems[i] / 10;
}