在瀏覽器中，我們一旦把節(jié)點添加到document.body（或者其他節(jié)點）中，頁面就會更新并反映出這個變化
如果當(dāng)我們要向document中添加大量數(shù)據(jù)時(比如1w條)澜公，如果像上面的代碼一樣，逐條添加節(jié)點，這個過程就可能會十分緩慢殷费。
當(dāng)然,你也可以建個新的節(jié)點,比如說div,先將oP添加到div上,然后再將div添加到body中.但這樣要在body中多添加一個<div></div>.但文檔碎片不會產(chǎn)生這種節(jié)點.
var oDiv = document.createElement("div");
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oDiv.appendChild(op);
}
document.body.appendChild(oDiv);
為了解決這個問題，我們可以引入createDocumentFragment()方法，它的作用是創(chuàng)建一個文檔碎片主到，把要插入的新節(jié)點先附加在它上面畔师，然后再一次性添加到document中。
//先創(chuàng)建文檔碎片
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中
document.body.appendChild(oFragmeng);
