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

一般来说，对于任何类型的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>

延伸阅读

---

▶ Walkthrough007