如何通过document.createDocumentFragment实现DOM批量插入并有效减少重排？
- 内容介绍
- 相关推荐
本文共计598个文字，预计阅读时间需要3分钟。
使用 `document.createDocumentFragment 批量插入 DOM 元素，核心在于先将多个节点先离线组装好，再一次性挂载到真实 DOM 中，从而避免每次插入都触发浏览器的 reflow 和 repaint。
为什么 DocumentFragment 能减少重排
DocumentFragment 是一个轻量级的 DOM 片段，它不直接属于主文档树，也不在页面中渲染。向 Fragment 中添加子节点不会触发任何布局计算或样式重排；只有当整个 Fragment 作为单个节点被插入到真实 DOM 时，浏览器才进行一次统一的布局更新。
本文共计598个文字，预计阅读时间需要3分钟。
使用 `document.createDocumentFragment 批量插入 DOM 元素，核心在于先将多个节点先离线组装好，再一次性挂载到真实 DOM 中，从而避免每次插入都触发浏览器的 reflow 和 repaint。
为什么 DocumentFragment 能减少重排
DocumentFragment 是一个轻量级的 DOM 片段，它不直接属于主文档树，也不在页面中渲染。向 Fragment 中添加子节点不会触发任何布局计算或样式重排；只有当整个 Fragment 作为单个节点被插入到真实 DOM 时，浏览器才进行一次统一的布局更新。