document.createDocumentFragment的探索之旅
@(author: Jsaonwong) 以下是我的 个人博客 ，欢迎大家来作客并指正我文章中的错误！
前言
事实上在写这篇文章之前想了许久，究竟要写关于哪个课题的文章，因为自己更希望写一些工作相关的课题，但是总觉得自己在工作中累计的各种经验太碎片化了，并不足以用文章 输出出来，待我有空时精心整理之后再与大家分享吧，这里就先说一个大家平常都不怎么用到或者没用过的东西 DocumentFragment ;
什么是DocumentFragment?
可能许多童鞋都听说过这个东西，甚至也知道怎么使用它，但是我相信大部分的童鞋应该没有真正的去了解过它，追本溯源可以说是程序员最需要的一种特性，如果只是一味知道这个东西怎么用，或者是别人说这个东西好用就盲目地使用它，那么这恐怕并不是作者的本意。
没有真正了解过DocumentFragment这个东西的可以去 w3c 了解一下,看过之后大家就会了解到这个东西其实不是什么别的东西，正是我们耳熟能详的DOM对象。
它是一个概念比较简单却又很实用的DOM对象，w3c如是说：DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点，这要怎么理解呢！其实我是这么理解的，DocumentFragment它是一个文档碎片，轻量级的文档，能够提取部分文档的树或创建一个新的文档片段。
然而w3c下一句解释让我一开始有点懵逼，这句话是这么说的：“DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。”这句话又要怎么理解呢？
其实在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段（documentfragment）是一种”轻量级“的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。
而最有用的一段概念解释当为下面这一段：“即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，尤其是与 Range 接口一起使用时更是如此。”
DocumentFragment的作用在最后这一段文字的解释中表达的淋漓尽致，它本身是不参与任何DOM操作的，它只是一个暂时缓存准备插入到dom的节点的“容器”。
createDocumentFragment真的如想象中神奇吗？
江湖传闻，得DocumentFragment者得天下，听说使用这个api可以对DOM操作进行优化，并且性能会得到 大量 的提升，理论上来说如果情景是for循环10000次向body插入div的话，传统的使用appendChild会导致多次的回流和重绘，必然会影响页面的性能，然而事实如此吗？因此本人捧着一颗热忱的心前去试验了一把，结果却是让我大跌眼睛。
个人写的代码如下：（如果错误或不公平的地方吗敬请指正）
第一段是for循环append的代码
test for append's performance
查看更多关于DocumentFragment的探索之旅_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114571