本文通过对比实验解析 document.createDocumentFragment() 的使用原理。直接操作 DOM 会导致频繁的页面重绘与回流，显著降低性能。利用文档碎片节点批量添加子节点后一次性插入文档，可有效减少页面刷新次数，从而提升 JavaScript 执行效率。
文档碎片优化 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() 仅被调用了一次，这意味着整个批量操作只需触发一次页面刷新，因此所需时间明显少于第一种方法。
我在三种不同的浏览器中运行了上述测试代码，大致得到的结果如下：
IE7：
方法一用时：140
方法二用时：125
Firefox：
方法一用时：66
方法二用时：43
Chrome：
方法一用时：35
方法二用时：25
测试结果表明，使用文档碎片的方法在耗时上始终优于直接操作 DOM，这与理论预期一致。