当前位置：首页 > news >正文

documentFragment api是什么，有哪些使用场景

news 2026/5/12 12:49:24

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);