DocumentFragment API 是 Web API 的一部分，表示一个没有父级的最小文档对象，被视为轻量版的 Document，用于存储一组 DOM 节点的集合。它不直接参与文档的渲染，因此对其操作不会触发页面的重排（reflow）或重绘（repaint），直到其内容被插入到真实 DOM 中。
核心特点
- 轻量级：不占用真实 DOM 结构，操作时不会影响页面布局或性能。
- 节点集合：可存储多个节点，支持批量操作。
- 事件不冒泡：在未插入 DOM 前，其内部事件不会冒泡到上层元素。
- 继承 Node 接口：支持 appendChild()、querySelector() 等方法。
使用场景
1. 批量 DOM 操作
- 问题：直接逐个插入节点到 DOM 会触发多次重排/重绘，影响性能。
- 解决方案：使用 DocumentFragment 预先组装所有节点，再一次性插入。
- 示例：
constfragment=document.createDocumentFragment();for(leti=0;i<100;i++){constdiv=document.createElement('div');div.textContent=`Item${i}`;fragment.appendChild(div);}document.body.appendChild(fragment);// 仅触发一次重排
2. 离屏 DOM 构建
- 场景：需要动态生成复杂结构（如表格、列表）时，避免频繁操作真实 DOM。
- 优势：在内存中完成构建后插入，减少渲染开销。
- 示例：
constfragment=document.createDocumentFragment();constdata=[{name:'Alice'},{name:'Bob'}];data.forEach(item=>{constp=document.createElement('p');p.textContent=item.name;fragment.appendChild(p);});document.getElementById('container').appendChild(fragment);
3. Web Components 开发
- 作用：
<template>标签的 content 属性返回一个 DocumentFragment，用于封装可复用的组件模板。 - 示例：
<templateid="user-card"><divclass="card"><h3></h3><p></p></div></template><script>consttemplate=document.getElementById('user-card');constfragment=template.content.cloneNode(true);// 克隆模板内容fragment.querySelector('h3').textContent='Alice';fragment.querySelector('p').textContent='Developer';document.body.appendChild(fragment);</script>
4. 避免内存泄漏
- 场景：移动节点时，若直接操作可能导致内存未释放。
- 解决方案：通过 DocumentFragment 中转节点，确保原引用被清除。
- 示例：
constoldNode=document.getElementById('old');constfragment=document.createDocumentFragment();fragment.appendChild(oldNode);// 移动节点到碎片document.getElementById('new-container').appendChild(fragment);
5. 动态内容填充
- 场景：填充表格、列表等动态数据时，先组装再插入。
- 示例：
functionrenderTable(data){constfragment=document.createDocumentFragment();data.forEach(row=>{consttr=document.createElement('tr');row.forEach(cell=>{consttd=document.createElement('td');td.textContent=cell;tr.appendChild(td);});fragment.appendChild(tr);});document.querySelector('table tbody').appendChild(fragment);}
性能对比
- 传统方式（逐个插入）：
// 触发100次重排for(leti=0;i<100;i++){constdiv=document.createElement('div');div.textContent=`Item${i}`;document.body.appendChild(div);} - DocumentFragment 方式（仅触发1次）：
// 仅触发1次重排constfragment=document.createDocumentFragment();for(leti=0;i<100;i++){constdiv=document.createElement('div');div.textContent=`Item${i}`;fragment.appendChild(div);}document.body.appendChild(fragment);
总结
DocumentFragment 是优化 DOM 操作的利器，尤其适合以下场景：
- 需要批量插入或修改节点时。
- 构建复杂结构（如 Web Components 模板）。
- 追求高性能的动态内容渲染。
通过减少重排/重绘次数，它能显著提升页面性能，尤其在数据量大或频繁更新的场景下效果更明显。
