深入理解 document.createDocumentFragment() 提升 DOM 操作效率

文档碎片优化 DOM 操作原理

document.createDocumentFragment() 的核心目的在于优化 DOM 操作性能。在 JavaScript 中，每次对 DOM 结构的修改都会触发页面的重绘（repaint）和重排（reflow），频繁操作会导致巨大的性能开销。为了规避这一问题，可以创建一个文档碎片（Document Fragment）对象，将所有需要添加的新节点先附加到该碎片上，最后再将整个碎片的内容一次性插入到文档中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document.createDocumentFragment()测试页面</title>
</head>
<body>
<script type="text/javascript">
var d1 = new Date();
for(var i=0;i<1000;i++)
       {
var op=document.createElement("P");
var oText=document.createTextNode("test1");
op.appendChild(oText);
document.body.appendChild(op);
       }
var d2 = new Date();
document.write("方法一用时：" + (d2.getTime() - d1.getTime()) + "<br/>");
       //---+-----
var d3 = new Date();
var oFrag=document.createDocumentFragment();
for(var i=0;i<1000;i++)
       {
var op=document.createElement("P");
var oText=document.createTextNode("test2");
op.appendChild(oText);
oFrag.appendChild(op);
       }
document.body.appendChild(oFrag);
//这段代码中
var d4 = new Date();
document.write("方法二用时：" + (d4.getTime() - d3.getTime()) + "<br/>");
</script>
</body>
</html>

性能对比测试与分析

当节点被添加到 document.body（或其后续节点）时，浏览器会立即反映这一变化并触发页面刷新。在第一种方法中，循环内调用了 1000 次 document.body.appendChild()，每次调用都会引发一次页面刷新，导致大量的页面碎片化和性能损耗。而在第二种方法中，document.body.appendChild() 仅被调用了一次，这意味着整个批量操作只需触发一次页面刷新，因此所需时间明显少于第一种方法。

方法一用时：140

方法二用时：125

方法一用时：66

方法二用时：43

方法一用时：35

方法二用时：25

测试结果表明，使用文档碎片的方法在耗时上始终优于直接操作 DOM，这与理论预期一致。