什么是 DocumentFragment
docFragment 是一个对空文档片段 DocumentFragment 对象的引用,点击这里可以查看更多关于DocumentFragment的说明。简单来说它是dom节点的内存对象,但它没有添加到DOM Tree中。
页面回流(reflow)
当DOM Tree中添加了新元素之后,为了重新布局所有的显示元素,页面需要重新计算各个element的位置和大小,这一过程就称之为页面回流。频繁的DOM Tree插入会带来页面刷新压力,对显示性能有不小的影响
使用DocumentFragment的优势
由于documentFragment是内存对象,对其增加子元素并不会影响DOM Tree,添加了子节点时,也不会引起回流问题,因此,当需要插入大量的子元素时,documentFragment对象可以很好的优化性能。可以通过下面的测试代码来进行检验:
var testFragment = function(times){
var start = new Date();
for(var i=0; i<times; i++){
var a = document.createDocumentFragment();
a.appendChild(document.createTextNode('some test text'));
}
var end = new Date();
console.log('fragment cost:'+(end.getTime() - start.getTime()));
};
var testElement = function(times){
var start = new Date();
for(var i=0; i<times; i++){
var a = document.createElement('div');
a.appendChild(document.createTextNode('some test text'));
}
var end = new Date();
console.log('element cost:'+(end.getTime() - start.getTime()));
};
var test = function(times){
testFragment(times);
testElement(times);
};
下表是调用test方法的时间开销,当数量级增加时,可以明显发现createDocumentFragment的性能要优于createElement
times值 | testFragment时间开销 | testElement时间开销 |
---|---|---|
1000 | 1 | 2 |
10000 | 20 | 33 |
100000 | 140 | 152 |
1000000 | 915 | 1156 |
10000000 | 8801 | 11278 |
区别
createDocumentFragment创建的元素无法设置innerHTML,但是createElement创建出来的元素可以设置innerHTML。