javascript如何实现片段_ fragment有什么用

DocumentFragment 是轻量级文档对象，用于批量创建和插入节点以避免频繁重排重绘、提升性能；通过 createDocumentFragment() 创建，添加子节点后一次性插入 DOM。

JavaScript 中的 DocumentFragment 是一个轻量级的文档对象，它不直接属于页面 DOM 树，但可以像真实 DOM 节点一样操作和添加子元素。它的核心作用是：**批量创建、组织和插入节点时，避免频繁触发重排（reflow）和重绘（repaint），从而提升性能。**

片段（Fragment）用来高效批量插入节点

当你需要一次性往页面中添加多个新元素时，如果逐个用 appendChild() 插入，浏览器可能每次都要重新计算布局、更新样式，造成性能浪费。而 DocumentFragment 允许你先把所有节点“攒”在一起，再一次性插入到 DOM 中 —— 浏览器只做一次渲染更新。

例如：

<li>动态生成一长串列表项（<li>）并追加到 <ul></ul> 中； <li>从模板字符串或数据循环创建多个卡片、表格行； <li>在 Vue/React 等框架底层，也常利用 fragment 思路优化 vnode 批量挂载。

怎么创建和使用 DocumentFragment

用 document.createDocumentFragment() 创建，然后像操作普通父节点一样添加子节点（append()、appendChild() 等），最后把它作为整体插入目标位置。

立即学习“Java免费学习笔记（深入）”；

示例代码：

标签： vue react javascript java html node 浏览器 app ai 区别 重绘