DocumentFragment 是轻量级文档对象，用于批量创建和插入节点以避免频繁重排重绘、提升性能；通过 createDocumentFragment() 创建，添加子节点后一次性插入 DOM。
JavaScript 中的 DocumentFragment 是一个轻量级的文档对象，它不直接属于页面 DOM 树，但可以像真实 DOM 节点一样操作和添加子元素。它的核心作用是：**批量创建、组织和插入节点时，避免频繁触发重排（reflow）和重绘（repaint），从而提升性能。**
片段（Fragment）用来高效批量插入节点
当你需要一次性往页面中添加多个新元素时，如果逐个用 appendChild() 插入，浏览器可能每次都要重新计算布局、更新样式，造成性能浪费。而 DocumentFragment 允许你先把所有节点“攒”在一起，再一次性插入到 DOM 中 —— 浏览器只做一次渲染更新。
例如：
）并追加到
中；
怎么创建和使用 DocumentFragment
用 document.createDocumentFragment() 创建，然后像操作普通父节点一样添加子节点（append()、appendChild() 等），最后把它作为整体插入目标位置。
立即学习“Java免费学习笔记（深入）”；
示例代码：
const frag = document.createDocumentFragment();for (let i = 0; i < 100; i++) { const item = document.createElement('li'); item.textContent = `Item ${i + 1}`; frag.appendChild(item); // 全部加到 frag，不触发现实 DOM 更新}document.querySelector('ul').appendChild(frag); // 一次插入，高效
Fragment 和直接拼接 innerHTML 有啥区别？
两者都能减少重排，但关键不同在于：
简单说：要插纯内容且可信，innerHTML 快；要插结构复杂、需交互或来自用户输入的内容，Fragment 更安全可靠。
现代替代方案：template 标签 + content
除了 createDocumentFragment()，也可以配合 使用，它天生就是离线 DOM 容器：
const tmpl = document.getElementById('itemTemplate');const frag = document.importNode(tmpl.content, true);frag.querySelector('li').textContent = 'New item';document.querySelector('ul').appendChild(frag);
这种方式更适合带结构的可复用模板，本质仍是利用了 fragment 的离线特性。
基本上就这些。Fragment 不是必须用，但在处理大量动态 DOM 插入时，是个简单又有效的性能优化手段。
以上就是javascript如何实现片段_ fragment有什么用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543773.html
微信扫一扫 
支付宝扫一扫 
