了解DocumentFragment 给我们带来的性能优化

什么是DocumentFragment？

DocumentFragment 节点不属于文档树，继承的 parentNode属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。

这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。
也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。

用途

同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流（什么是重绘，回流？）。这样会加大页面的负担。影响页面性能。因此我们可以创建这样一个临时占位符。进行操作以下是DEMO:

// Create the fragment
var fragment = document.createDocumentFragment();

//add DOM to fragment 
var spanNode = document.createElement("span");
spanNode.innerHTML = "Hello World";
fragment.appendChild(spanNode);


//add this DOM to body
document.body.appendChild(spanNode);

QQ截图20170427103257.jpg