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

最新推荐文章于 2023-11-29 14:59:35 发布

SunfinLee

最新推荐文章于 2023-11-29 14:59:35 发布

阅读量873

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cengjingcanghai123/article/details/20120913

本文介绍了如何通过缓存DOM元素来提升JavaScript性能。具体措施包括将频繁访问的DOM属性存储在局部变量中，以及在循环中提前缓存集合长度等。通过示例对比展示了不同优化手段的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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