Skip to content

一次性插入多个 DOM 节点,考虑性能

DOM 性能

  • DOM 操作非常“昂贵”,避免频繁的 DOM 操作
  • 对 DOM 查询做缓存
js
// 不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {}
// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length;
for (let i = 0; i < length; i++) {}
  • 将频繁操作改为一次性操作
js
const list = document.getElementById('list');
// 创建一个文档片段,此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');
  li.innerHTML = `List item ${i}`;
  // 先插入到文档片段中
  frag.appendChild(li);
}
// 都完成后,再统一插入到 DOM 结构中
list.appendChild(frag);

基于 MIT 许可发布