javascript性能提升——访问集合元素时使用局部变量

——authored by 李家优

一般来说，对于任何类型的DOM访问，当同一个DOM属性或方法需要多次访问时，最好使用一个局部变量缓存此成员。当遍历一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后，使用局部变量访问这些需要多次访问的元素。

下面的例子，在循环中访问每个元素的三个属性。最慢的版本每次要访问全局document，优化后的版本缓存了一个集合的引用，最快的版本把当期集合元素存储到一个变量。这三个版本都缓存了集合的length属性。

example:

<script type="text/javascript">
// 较慢
function collectionGlobal() {
var coll = document.getElementByTagName('div'),
len =coll.length,
name = '';
for (var count = 0; count < len; count++) {
name = document.getElementByTagName('div')[count].nodeName;
name = document.getElementByTagName('div')[count].nodeType;
name = document.getElementByTagName('div')[count].tagName;
}
return name;
}
</script>

<script type="text/javascript">
// 较快
function collectionGlobal() {
var coll = document.getElementByTagName('div'),
len =coll.length,
name = '';
for (var count = 0; count < len; count++) {
name = coll[count].nodeName;
name = coll[count].nodeType;
name = coll[count].tagName;
}
return name;
}
</script

<script type="text/javascript">
// 最快
function collectionGlobal() {
var coll = document.getElementByTagName('div'),
len =coll.length,
name = '',
el = null;
for (var count = 0; count < len; count++) {
el = coll[count];
name = el.nodeName;
name = el.nodeType;
name = el.tagName;
}
return name;
}
</script>