应避免在循环中反复使用 innerHTML 更新同一元素，因其会触发多次重排；推荐用 DocumentFragment 批量操作再一次性插入；同时需防止读-写交替导致强制同步布局。
直接用 innerHTML 更新内容，但别在循环里反复赋值
多数场景下，innerHTML 是最直观的 DOM 更新方式，比如替换某个容器的全部子节点：
document.getElementById('list').innerHTML = 'for 循环中反复给同一个元素设置 innerHTML，浏览器会触发多次重排（reflow），性能急剧下降。
常见错误现象：for (let i = 0; i ' + i + ''; } —— 这种写法每次 += 都要解析整个 HTML 字符串并重建子树，实际执行时间可能比预估高一个数量级。
- 批量操作优先拼接字符串，最后一次性赋值：
let html = ''; for(...) { html += '...'; } el.innerHTML = html; - 若需保留事件或状态，改用
appendChild或DocumentFragment - 纯文本更新优先用
textContent，它不解析 HTML，更快更安全
用 DocumentFragment 批量插入节点，避免频繁重排
当你需要动态创建多个节点并插入到 DOM 中（比如渲染列表），直接对真实元素调用 appendChild 每次都会触发样式计算和布局。而 DocumentFragment 是一个轻量的“离屏”容器，所有操作都在内存中完成，最后只触发一次真实 DOM 更新。
使用场景：从数组生成一组 并追加到
立即学习“Java免费学习笔记（深入）”；
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 < items.length; i++) {
el[i].style.left = el[i-1].offsetLeft + el[i-1].offsetWidth + 'px'; // 每次都强制计算
}
- 把所有读操作集中到循环前，所有写操作集中到循环后
- 用
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(...)替代
offsetHeight 读取或 innerHTML += 连续赋值里。 
