javascript如何实现片段_ fragment有什么用-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-18 22:50:46

原创

959人浏览过

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

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

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

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

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

例如：

<li>

<ul></ul>

node

怎么创建和使用 DocumentFragment

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

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

示例代码：

芝士饼

芝士饼是一个一站式AI原生应用开发平台，简单几步即可完成应用的创建与发布。

查看详情

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 是真实节点容器

简单说：要插纯内容且可信，innerHTML 快；要插结构复杂、需交互或来自用户输入的内容，Fragment 更安全可靠。

现代替代方案：template 标签 + content

除了 createDocumentFragment()，也可以配合 <template></template> 使用，它天生就是离线 DOM 容器：

<template id="itemTemplate">
  <li class="list-item"></li>
</template>

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有什么用的详细内容，更多请关注php中文网其它相关文章！