<think>嗯，用户想
了解JavaScript中的
DocumentFragment，也就是
文档碎片的
使用教程。我先得回顾一下自己对这个概念的理解。
文档碎片主要用于优化DOM操作，减少页面回流和重绘，对吗？记得每次直接操作DOM都会导致浏览器重新渲染，频繁操作的话性能会很差。所以
使用文档碎片可以把多个DOM操作集中处理，这样只触发一次回流，提升性能。
用户可能已经知道DOM操作的基本方法，但可能不太清楚如何高效地进行批量操作。比如添加多个元素时，如果逐个添加，每次都会影响性能。这时候
文档碎片就派上用场了。我需要先解释什么是
DocumentFragment，然后给出具体的
使用步骤和示例。
接下来，我需要确保覆盖基本概念、
使用场景、具体步骤、代码示例以及注意事项。可能还需要提到相关的引用，比如用户提供的参考资料中有提到如何减少节点的插入操作，以及
文档碎片的代码示例。要注意引用标识的正确
使用，比如引用[1]、[2]、[5]中的内容。
比如，引用[5]中提到，添加100个li元素时，
使用文档碎片可以一次性追加，减少资源消耗。这个例子很典型，应该包含在教程中。同时，引用[4]中的代码示例展示了如何将元素从DOM树移到
文档碎片中，这需要解释清楚，避免用户误解。
还要注意用户可能的误区，比如
文档碎片本身不会被渲染，但添加到
文档后子节点会渲染。另外，
文档碎片在添加到DOM后会被清空，这个细节要说明，否则用户可能在后续代码中重复
使用时会遇到问题。
然后，我需要组织内容结构，先讲基本概念，再讲为什么
使用，接着是
使用步骤和代码示例，最后注意事项和常见问题。这样用户能够逐步理解。
可能的问题点包括：如何创建
文档碎片，如何将元素添加进去，如何一次性插入到DOM中。代码示例要简洁明了，比如创建一个ul，然后生成多个li并添加到
文档碎片，最后将
碎片追加到ul中。同时，对比不
使用文档碎片的情况，突出性能优化的效果。
另外，注意事项部分需要强调
文档碎片的临时性，以及添加后原DOM元素的移除情况，比如引用[4]中的span元素被添加到
碎片后，会从原DOM树中移除，这点需要提醒用户注意，避免出现意外行为。
最后，生成相关问题，帮助用户进一步学习。比如如何与其他优化方法结合，或者性能对比测试的方法。这些相关问题需要与
文档碎片相关，但稍微扩展，促进用户深入思考。
检查LaTeX格式是否正确，虽然用户的问题可能不涉及数学公式，但系统指令要求行内表达式用$...$，独立公式用$$...$$，但这里可能不需要，所以确保没有遗漏。中文回答，结构清晰，分步骤说明，代码块用正确语法高亮。
总结一下，回答的结构应该是：
1. 基本概念：定义
文档碎片，引用相关文献。
2. 为什么
使用：性能优化，减少回流，引用资料中的说明。
3.
使用教程：步骤分解，代码示例。
4. 注意事项：
使用后的变化，临时性，引用中的例子说明。
5. 相关问题：扩展学习的方向。
这样用户能系统地
了解文档碎片的概念和应用，同时通过示例和注意事项避免常见错误。</think>### JavaScript
文档碎片（
DocumentFragment）
使用教程
#### 一、基本概念
文档碎片（
DocumentFragment）是一个轻量级的 DOM 节点容器，用于临时存储多个 DOM 元素。**它不会直接渲染到页面**，但可以通过一次操作将其内容批量插入 DOM 树，从而减少页面回流（reflow）和重绘（repaint）次数，优化性能[^1][^2]。
#### 二、为什么
使用文档碎片？
- **性能优化**：频繁操作 DOM 会导致浏览器反复重新渲染页面，而
文档碎片可将多次操作合并为一次[^5]。
- **减少资源消耗**：例如向列表中添加 100 个元素时，
使用文档碎片可减少 99 次回流[^5]。
#### 三、
使用步骤
1. **创建
文档碎片**
```javascript
let fragment = document.create
DocumentFragment();
```
2. **向
碎片中添加元素**
通过 DOM 操作（如 `createElement`、`appendChild`）向
碎片中添加内容：
```javascript
for (let i = 0; i < 100; i++) {
let li = document.createElement('li');
li.textContent = `Item ${i + 1}`;
fragment.appendChild(li);
}
```
3. **将
碎片插入 DOM 树**
一次性将
碎片内容追加到目标节点：
```javascript
document.querySelector('ul').appendChild(fragment);
```
#### 四、完整示例
```html
<ul id="list"></ul>
<script>
const list = document.getElementById('list');
const fragment = document.create
DocumentFragment();
// 生成 100 个 li 并添加到
碎片
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `List Item ${i + 1}`;
fragment.appendChild(li);
}
// 一次性插入 DOM
list.appendChild(fragment);
</script>
```
#### 五、注意事项
1. **
碎片内容不会单独渲染**：
文档碎片本身不可见，只有其子节点插入 DOM 后才会显示[^4]。
2. **
碎片插入后自动清空**：调用 `appendChild(fragment)` 后，
碎片内容会转移至 DOM，
碎片变为空容器[^3]。
3. **操作原有 DOM 节点需谨慎**：若将已存在于 DOM 树的节点加入
碎片，该节点会从原位置移除。
#### 六、性能对比
| 操作方式 | DOM 操作次数 | 回流次数 |
|-------------------|-------------|----------|
| 直接插入 DOM | 100 | 100 |
|
使用文档碎片 | 1 | 1 |
本文介绍了文档碎片DocumentFragment，它用于在不触DOM的情况下组装节点。通过`document.createDocumentFragment()`创建，可避免频繁操作DOM导致的性能问题。例如，可以先将节点添加到碎片，再一次性将其插入目标位置，从而提高效率。此外，文章还展示了如何利用碎片处理<template>元素中的内容，并通过实例说明其在循环创建大量元素时的优势。
最低0.47元/天 解锁文章
扫一扫
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
