[DOM][document][进阶]DocumentFragment, document.createDocumentFragment()
vue源码学习双向数据绑定原理前置知识
DocumentFragment
DocumentFragment(文档片段)是12中节点类型之一(《JavaScript高级程序设计》第275——276页)
DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。
虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以再里面保存将来可能会添加到文档中的节点。
创建文档片段,使用document.createDocumentFragment()
方法
DocumentFragment的变化不会触发DOM树的重新渲染,且不会导致性能等问题。
文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。
添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中的内容添加到文档中。在将文档片段作为参数传递给这两个方法时,
实际上只会将文档片段的所有子节点添加到相应位置上;
文档片段本身永远不会成文档树的一部分。
<ul id="myList"></ul>
var fragment = document.createDocumentFragment();
var ul = document.getElementById('myList');
var browsers = ['Chrome','FireFox','Opera','Safari','Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
})
ul.appendChild(fragment)
坚持,坚持,坚持。再坚持坚持!