如何通过document.createDocumentFragment批量修改DOM最小化重排频率？
- 内容介绍
- 相关推荐
本文共计860个文字，预计阅读时间需要4分钟。
`document.createDocumentFragment()` 是浏览器提供的轻量级 DOM 容器，它不直接属于主文档树。因此，在此之上进行的任何增删改操作都不会触发重排（reflow）或重绘（repaint）。将多个 DOM 操作先集中到 `DocumentFragment` 中，最后一次性插入真实 DOM，是减少重排次数、提升性能的常用技巧。
为什么 Fragment 能避免重排？
DocumentFragment 是一个“离线”节点，没有绑定到 document.body 或任何可视元素。浏览器不会为它计算布局、绘制样式或响应尺寸变化。只有当它被 append 到真实 DOM 时，才会作为整体参与一次布局计算——而不是每个子节点都单独触发一次。
本文共计860个文字，预计阅读时间需要4分钟。
`document.createDocumentFragment()` 是浏览器提供的轻量级 DOM 容器，它不直接属于主文档树。因此，在此之上进行的任何增删改操作都不会触发重排（reflow）或重绘（repaint）。将多个 DOM 操作先集中到 `DocumentFragment` 中，最后一次性插入真实 DOM，是减少重排次数、提升性能的常用技巧。
为什么 Fragment 能避免重排？
DocumentFragment 是一个“离线”节点，没有绑定到 document.body 或任何可视元素。浏览器不会为它计算布局、绘制样式或响应尺寸变化。只有当它被 append 到真实 DOM 时，才会作为整体参与一次布局计算——而不是每个子节点都单独触发一次。