DocumentFragment --更快捷操作DOM的途径

Posted 2020-10-03 Lulin1

　　使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点。可以不依赖可见的DOM来构造一个DOM结构，而效率高是它真正的优势，试验表明，它比直接操作DOM快70%。下面我们就来看看DocumentFragments是如何使用的。

DocumentFragment例子

　　我们要使用UL元素，然后往里面插入LI元素：

<ul id="list"></ul>

　　DOM插入和修改是一个很费力耗时的工作，所以，这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment：

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

　　DocumentFragment实际上像一个伪DOM节点，在这个例子里你可以把它当成虚拟的UL元素。现在，我们开始往里面加入元素：

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
    var li = document.createElement("li");
    li.innerhtml = "List item " + x;
    frag.appendChild(li);
}

　　往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成，你可以访问了，你就可以把DocumentFragement挂到它的父节点上：

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

　　使用DocumentFragement要比直接对DOM节点操作要快的多，而且可以利用新DOM节点来操作DocumentFragement，这样比操作整个页面DOM要更容易。所以，当需要进行大量DOM操作时，尽量使用DocumentFragement，它会让你的应用变的更快！

 

  转自：http://www.webhek.com/post/javascript-documentfragment.html