JavaScript 性能优化：利用 DocumentFragment 批量插入节点

DOM 批量插入的性能挑战

在浏览器环境中，每当将节点添加到 document.body（或其他父节点）时，页面会立即更新以反映这一变化。对于少量的 DOM 更新，逐条循环插入通常运行良好，这也是开发者常用的常规做法。

 
for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
} 

然而，当需要向 document 中添加大量数据（例如 1 万条记录）时，如果仍采用上述逐条添加节点的方式，整个过程可能会变得非常缓慢。

使用 DocumentFragment 优化节点插入

为解决此问题，可以引入 createDocumentFragment() 方法。该方法用于创建一个文档碎片（Document Fragment），将待插入的新节点先附加到该碎片上，然后再一次性将碎片添加到 document 中。具体实现代码如下：

 
var oFragmeng = document.createDocumentFragment(); // 先创建文档碎片
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op); // 先附加在文档碎片中
} 
document.body.appendChild(oFragmeng); // 最后一次性添加到 document 中

经过测试，在 IE 和 Firefox 浏览器下，该方法的性能均有明显提升。读者可自行进行对比测试验证。

前端性能优化往往始于对细节的关注，若忽视这些潜在问题，可能会导致严重的性能瓶颈。

注：这种优化思路与循环拼接 HTML 字符串后一次性插入 DOM 的做法类似。