《JavaScript高级程序设计》性能探究之优化DOM交互-优快云博客

本文探讨了如何通过减少DOM现场更新、使用文档碎片、innerHTML替代直接操作DOM、事件代理以及HTMLCollection优化循环访问，以提高网页加载速度和用户体验。重点介绍了优化DOM交互的关键策略，包括使用创建文档碎片来避免现场更新、利用innerHTML加速DOM结构创建、采用事件代理减少事件监听器数量、优化HTMLCollection循环访问等方法。

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

本文来自《JavaScript高级程序设计》阅读笔记

优化DOM交互

-------- DOM操作与交互要消耗大量时间，因为它们往往需要重新渲染整个页面或者某一个部分。

最小化现场更新

现场更新：因为需要立即（现场）对页面对用户的显示进行更新。
现场更新越多，代码完成执行所花的时间久越长

举例：

给列表添加10个项目。

var list = document.getElementById("myList"),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      list.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

------ 这样添加一个项目，需要添加li元素，给它添加文本节点，10个项目的话，需要20次的现场更新。

比较好的方式还是创建文档碎片来创建DOM结构，接着将其添加到List元素中，为了避免现场更新和页面闪烁。

var list = document.getElementById("myList"),
      fragment = document.createDocumentFragment(),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      fragment.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

list.appendChild(fragment);

2. 使用innerHTML

当把innerHTML设置为某一个值， 后台会创建一个HTML解析器，然后 使用内部的DOM调用来创建DOM结构，而 非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的，所以执行快得多。

3. 使用事件代理

4. 注意HTMLCollection

优化HTMLCollection访问最重要的地方就是循环。

举例：

var images = document.getElementsByTagName("img"),
      i,
      len;
for(i=0;len = images.length;i++){

}

发生以下情况时候回返回 HTMLCollection对象

进行对getElementsByTagName()的调用
获取元素的childNodes属性
获取元素的attributes属性
访问特殊的集合，如document.forms、document.images等