西红柿爱番茄

今晚在校验译本的时候，查看到一些优化HTMLCollection对象的方法，自己开始也对此有些许疑惑，就动手测试起来，首先想到的是把通过document.getElementsByTagName等等类似的方法获得的HTMLCollection对象先储存进数组里，之后来操作数组。这跟普通的缓存HTMLCollection对象的length属性来进行比较，结果很吐血，也很兴奋：我用多了一个循环的操作（把HTMLCollection储存进数组）来跟缓存length的相比，耗时居然比后者少，操作越多，效果越明显。示例如下：
[javascript]
onload = function(){
Watch.start("Store length");
var p2 = document.getElementsByTagName("p");
//第一次循環使用
for (var i = 0, l = p2.length; i < l; i++) {
p2[i].innerHTML = "Change again";
}
//第二次循環使用
for (var i = 0, l = p2.length; i < l; i++) {
p2[i].innerHTML = "Change again";
}
Watch.stop();

///////////////////////////////////////////////////////////////////////

Watch.start("Store to array");
var p = document.getElementsByTagName("p");
var arr = [];
var c = null;
//儲存進數組
//注意這種循環的使用方式，下同
for (var i = 0; c = p[i++];) {
arr.push(c);
}
//第一次循環使用
for (var i = 0; c = arr[i++];) {
c.innerHTML = "Change backup."
}
//第二次循環使用
for (var i = 0; c = arr[i++];) {
c.innerHTML = "Change backup."
}
Watch.stop();
//打印结果
Watch.report();
}
[/javascript]

接下來在body中就是一连串的p标签，在这里就省略了，详细的看《测试页面》。

测试结果确实很雷人，更雷人的是，在Google Chrome，Safari，Opera以及IE下效果特佳。^_^

这或许是上面提到的另类的for循环的方式的作用，那么换成另外一种类似的while循环来测试一下看看如何？《测试页面》。结果跟上面一样，雷人。

上面我所使用的另类的for循环和while循环到底有什么魔力，我也都还一时说不清楚（缺点：遇到假值的话，循环断开），希望有高人来指点一下 ^_^。我在另外一篇文章里也讨论过优化循环的论述：《对循环操作的几种优化》。

但是，如果不把HTMLCollection对象储存进数组，直接使用上面的两种循环优化技巧的话，效果却没有那么明显，性能也基本没什么变化。《测试页面》

对于上面的使用数组来缓存HTMLCollection的方式，如果在过多的操作HTMLCollection对象的情况下，结合上面的循环技巧，应该能优化不少性能。当然了，普通的一个HTML文档中的P没有示例中的多，但还是那句话“积多成疾，因地制宜。”。

///////////////// 2010-01-29 update /////////////////

考虑到其他几种优化循环的技巧，比如改变结束条件判断的方式，不根据长度(length)递增的形式，而是使用递减的方式，这个经过测试，在一定程度上能提高循环的性能，比如（for(var i=length-1;i>=0;i–）。为了跟这个优化循环的技巧进行比较，写了个测试页面，测试结果在各个浏览器里结果跟上面也是差不多的，《测试页面》

还有另外一种跟上面类似的优化循环的方式：for(var i=length;i–;)。也写了一个测试页面来测试它们之间的性能比较：《测试页面》，效果同上。