innerHTML非万能，createElement非慢；批量插入需防重排，避免循环赋值；表单控件用innerHTML会丢失状态；小量节点createElement更快；DocumentFragment可避免多次重排；读布局信息须缓存；textContent更安全高效但不支持HTML。
innerHTML 不是万能的，document.createElement 也不是慢的代名词——性能差异取决于场景、浏览器和操作粒度。
用 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 <script>'，结果就是字面量hello <script> - 设 HTML 用
el.innerHTML = 'hello <script>'，<script>会被解析，可能执行（除非 sandboxed） - 但
textContent无法设置富文本、内联样式或子元素结构——它只管文本节点本身
