JS createDocumentFragment()方法：创建文档片段

DocumentFragment 是一个虚拟的节点类型，仅存在于内存中，没有添加到文档树中，所以看不到渲染效果。使用文档片段的好处，就是避免浏览器渲染和占用资源。当文档片段设计完善后，再使用 JavaScript 一次性添加到文档树中显示出来，这样可以提高效率。

主要特征值：nodeType 值等于 11、nodeName 等于 #document-fragment 、nodeValue 等于 null、parentNode 等于 null。

在 JavaScript 中可以使用 createDocumentFragment() 方法创建文档片段：

var fragment = document.createDocumentFragment();

使用 appendChild() 或 insertBefore() 方法可以把文档片段添加到文档树中。

每次使用 JavaScript 操作 DOM 都会改变页面呈现，并触发整个页面重新渲染（回流），从而消耗系统资源。为了解决这个问题，可以先创建一个文档片段，把所有的新节点附加到文档片段上，最后再把文档片段一次性添加到文档中，减少页面重绘的次数。

下面示例使用文档片段创建主流 Web 浏览器列表。

 ul id= ul /ul 

 script 

 var element = document.getElementById( ul 

 var fragment = document.createDocumengFragment();

 var browsers = [ Firefox , Chrome , Opera , Safari , Internet Explorer 

 browsers.forEach (function (brower) {

 var li = document.createElement( li 

 li.textContent = browser;

 fragment.appendChild(li); //此处往文档片段插入子节点，不会引起回流

 element.appendChild(fragment); //将打包好的文档片段插入ul节点

 /script 

上面示例准备为 ul 元素添加 5 个列表项。如果逐个添加列表项，将会导致浏览器反复渲染页面。为避免这个问题，可以使用一个文档片段来保存创建的列表项，然后再一次性将它们添加到文档中，这样能够提升系统的执行效率。

23239.html

javaJavaScriptWeb