什么是 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创建的元素无法设置innerHTML，但是createElement创建出来的元素可以设置innerHTML。