HTMLDOM操作与JS优化技巧

本文深入剖析了HTML DOM操作与JavaScript性能优化的关键误区与实战技巧，揭示了innerHTML并非万能、createElement也未必低效的真相——性能差异取决于具体场景、浏览器实现和操作粒度；重点强调批量插入应借助DocumentFragment避免多次重排，表单控件慎用innerHTML以防状态丢失，读取布局信息必须缓存以规避强制同步布局，而纯文本更新首选textContent以兼顾安全与效率，最终指出真正拖慢页面的往往不是DOM操作本身，而是那些隐式触发重排与打断渲染流水线的“看不见的代价”。

用 innerHTML 批量插入时要注意重排开销

直接拼接字符串再赋值给 innerHTML 看似快，但每次赋值都会触发浏览器解析、构建节点、重排（reflow）和重绘（repaint）。尤其当目标容器已有大量子节点，或父级样式含 float、position: absolute 等影响布局的规则时，开销会陡增。

• 避免在循环中反复写 element.innerHTML += htmlString —— 这会导致多次解析+重排，比单次拼完再赋值慢数倍
• 若 HTML 片段含表单控件（如 <input>），用 innerHTML 插入后，原绑定的事件监听器、焦点状态、输入值都会丢失
• Chrome 下对小量节点（≤10 个）的插入，createElement + appendChild 实测反而比 innerHTML 快 10%~20%，因为跳过了 HTML 解析阶段

DocumentFragment 是高频 DOM 插入的必选项

当你需要动态添加几十甚至上百个节点（比如渲染列表），逐个 appendChild 会引发多次重排；而把它们先塞进 DocumentFragment，再一次性挂到真实 DOM 上，能消除中间态的布局计算。

• DocumentFragment 不在主 DOM 树中，它的子节点被添加时不会触发任何重排
• 不要用 fragment.appendChild(node) 循环一百次——改用 fragment.append(...nodes)（ES2015+）或 fragment.appendChild(document.importNode(node, true)) 复用已有节点
• 注意：IE11 及更早版本不支持 fragment.append()，需降级为 appendChild 或用 fragment.innerHTML = html 回退

读取布局信息前先缓存，别在循环里调 offsetHeight

像 offsetTop、getBoundingClientRect()、computedStyle 这类 API 是“强制同步布局”的触发器。一旦你读了，浏览器就得立刻完成所有待处理的样式计算和重排，才能返回结果。

• 如果在 for 循环里反复读 el.offsetHeight，等于每轮都强制刷新一次布局，性能断崖式下跌
• 正确做法：只读一次，存进局部变量，后续逻辑复用该变量
• 若必须批量读多个元素的尺寸，先把它们从文档流中临时移出（el.style.display = 'none'），读完再恢复——可避免连续重排

textContent 比 innerHTML 安全且快，但不能替代 HTML 解析

如果你只是想设置纯文本内容，textContent 几乎总是优于 innerHTML：它不触发 HTML 解析，不执行脚本，不重建子节点，且自动转义防止 XSS。

• 设文本用 el.textContent = 'hello