JS优化--- createDocumentFragment()

前言：在昨天的学习中，听老师介绍了createDocumentFragment()这个方法，好吧，我承认昨天是我第一次听说这个方法，今天查了资料，有了些许初步的了解，简单介绍一下吧

一.首先，让我们看几种常见的动态创建html节点的方法，如下所示：

方法	说明
createAttribute(name)	用指定名称name创建特性节点
createComment(text)	创建带文本text的注释节点
createDocumentFragment()	创建文档碎片节点
createElement(tagname)	创建标签名为tagname的节点
createTextNode(text)	创建包含文本text的文本节点

以上这些方法，每次JavaScript对DOM的操作都会改变当前页面的呈现，并重新刷新整个页面，从而消耗了大量的时间。而createDocumentFragment()的作用，就是可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

二，接下来正式介绍createDocumentFragment()

DocumentFragment：表示文档的一部分（或一段），更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。且不属于文档树，继承的 parentNode 属性总是 null。
不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。 它还有利于实现文档的剪切、复制和粘贴操作。
可以用Document.createDocumentFragment() 方法创建新的空DocumentFragment 节点。

三.用法示例

使用appendChild逐个向DOM文档中添加1000个新节点：

 for (var i = 0; i < 1000; i++)
  {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el); //直接用appendChild向文档中插入节点
  }

使用createDocumentFragment()一次性向DOM文档中添加1000个新节 点：

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++)
{
  var el = document.createElement('p');
  el.innerHTML = i; 
  frag.appendChild(el); //首先将新节点先添加到DocumentFragment 节点
}
document.body.appendChild(frag);//然后用appendChild插入文档中

四.总结

我们可以理解为DocumentFragment （文档碎片节点）是一个插入结点时的过渡，我们把要插入的结点先放到这个文档碎片里面，然后再一次性插入文档中，这样就减少了页面渲染DOM元素的次数。经IE和FireFox下测试，在append1000个元素时，效率能提高10%-30%，FireFox下提升较为明显。
不要小瞧这10%-30%，效率的提高是着眼于多个细节的，如果我们能在很多地方都能让程序运行速度提高10%-30%，那将是一个质的飞跃！