dom中的文档碎片(DocumentFragment)

对文档碎片的基本认识

文档碎片可以提高DOM操作性能（理论上，注意！！理论上的）

文档碎片原理

        减少对DOM 修改带来的的回流操作。

此为转载的语句(http://www.2cto.com/kf/201404/290716.html);

mdn中的解释为(https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment):

具体概念还可参照(http://www.runoob.com/jsref/met-document-createdocumentfragment.html)：

DocumentFragments是DOM节点。 它们从不是主要的DOM树的一部分。 通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。 在DOM树中，文档片段由其所有子代替。

 

vue.js，rect.js所用到的虚拟dom生成原理就是采用createDocumentFragment方法；

 

为了检验是否加快,在firefox和chrome做了如下测试:

测试代码:

1.首先定义公共的变量和函数

var b = document.getElementsByTagName('body')[0],
tmp = document.createDocumentFragment(),
s = new Date().getTime(),
num = 2*10000,
count = document.querySelectorAll("*").length + num;

function getSpendTimes(count,times){
return new Promise(function(resolve, reject) {
var curs = document.querySelectorAll("*").length;
var s = 0;
if(curs === count){
s = new Date().getTime()-times;
}
if (resolve){
resolve(s);
} else {
reject(0);
}
});

}

function getRenderTimes(count,times,call){
var s = 0;
getSpendTimes(count,times).then(function(times){
s = times;
if(s===0){
getRenderTimes(count,times,call);
}else{
call(s);
}
});

}

2.文档碎片方式:

for(var i=0;i<num;i++){
var li = document.createElement("li");
li.textContent = i;
tmp.appendChild(li);
}
b.appendChild(tmp);

getRenderTimes(count,s,function(times){
console.log(times);
});

3.dom常规添加方式:

for(var i=0;i<num;i++){
var li = document.createElement("li");
li.textContent = i;
b.appendChild(li);
}

getRenderTimes(count,s,function(times){
console.log(times);
});

 

PC的firefox (版本 48.0.2) 测试的结果:

文档碎片加载时间(测试了5次):166 148 141 147 142

dom常规添加方式:1425 1359 1392 1324 1350 

 

PC的chrome(版本 55.0.2883.87) 测试的结果:

文档碎片加载时间:60 68 56 41 59

dom常规添加方式:37 45 47 46 48

 

chrome对于文档操作优化的很好了,移动设备待测试ing