當我們操作html節點時候，很多情況是需要大量添加DOM元素，如果是不斷地使用appendChild插入子節點方式，性能會大打折扣。所以我們應該使用文檔碎片，一種輕量級文檔處理方式，但是並沒有所謂的文檔碎片標籤。
文檔碎片可以當作倉庫，緩存使用。
看例子代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DocumentFragment文檔碎片</title>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
<script>
function a1() {
var time1 =( +new Date());
for (var i = 0; i < 5000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
document.getElementById('test').innerHTML = '<br><div>普通方式創建耗時'+ ( +new Date() - time1);
}
function a2() {
var oFragmeng = document.createDocumentFragment(); //創建文檔碎片
var time2 =( +new Date());
for (var i = 0; i < 5000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);
}
document.body.appendChild(oFragmeng); //最後一次性添加到document中
document.getElementById('test2').innerHTML = '<br><div>文檔碎片創建耗時'+ ( +new Date() - time2);
}
a1();
a2();
</script>
</body>
</html>上面例子，性能區別可以忽略，也許是文檔碎片需要繁重大量的DOM操作優勢才能體現吧！？文檔碎片能夠加快dom元素操作，當然也可以使用一個div標籤，將所有元素添加到div上面，再添加到目標節點上，性能差不多。所以是否需要使用文檔碎片，看實際情況吧。
參考鏈接：http://www.cnblogs.com/sxhlf/p/7027208.html