JavaScript操作DOM及高效更新技巧

const frag = document.createDocumentFragment();
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  frag.appendChild(li);
});
document.getElementById('list').appendChild(frag); // 仅这一次触发重排

• DocumentFragment 不是真实 DOM 节点，不能被查询或添加 CSS 类
• 它没有父节点，frag.parentNode 永远是 null
• 现代框架（如 React）底层也大量使用类似机制，只是封装得更隐蔽

避免频繁读取布局属性（offsetHeight、getBoundingClientRect() 等）

DOM 更新效率低，往往不是因为写得多，而是因为「读-写交替」太密。只要读取任何触发布局计算的属性（如 offsetTop、scrollHeight、getComputedStyle()），浏览器就不得不同步完成之前所有待处理的样式和布局任务，形成强制同步布局（forced synchronous layout），严重拖慢脚本执行。

典型错误模式：

for (let i = 0; i 

• 把所有读操作集中到循环前，所有写操作集中到循环后
• 用 requestAnimationFrame 延迟到下一帧再读，让浏览器有机会先完成上一批更新
• 如必须逐个读写，考虑用 ResizeObserver 或 IntersectionObserver 替代轮询

用 classList 切换状态，别手动拼接 className

通过修改 className 字符串来增删 class，容易覆盖已有类名或引入重复项，还可能触发不必要的重绘。而 classList 提供原子化操作，语义清晰且性能更好。

例如：

el.className = 'btn btn-primary active'; // ❌ 覆盖全部

el.classList.add('active'); // ✅ 只加

el.classList.toggle('disabled'); // ✅ 有则删，无则加

• classList.contains('x') 比正则匹配 className 快得多
• 支持多参数：el.classList.add('a', 'b', 'c')
• IE10+ 支持，无需 polyfill；如需兼容 IE9，可用 className.split(' ').includes(...) 替代

本篇关于《JavaScript操作DOM及高效更新技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！