关于createDocumentFragment

什么是 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

createDocumentFragment与createElement性能对比
times值testFragment时间开销testElement时间开销
100012
100002033
100000140152
10000009151156
10000000880111278

区别

createDocumentFragment创建的元素无法设置innerHTML,但是createElement创建出来的元素可以设置innerHTML。

Show Comments

Get the latest posts delivered right to your inbox.