Document​.create​Document​Fragment()文档片段节点

2019-04-30224次阅读DOM

在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记。DocumentFragments是DOM节点,通常的用例是创建文档片段,将多个元素附加到文档片段,然后将文档片段附加到DOM树。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。

 

Document​.create​Document​Fragment()语法

let fragment = document.createDocumentFragment();

创建文档片段,要使用document.createDocumentFragment()方法。文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。
文档片段节点的三个node属性——nodeType、nodeName、nodeValue分别是11、'#document-fragment'和null,文档片段节点没有父节点parentNode,所有父节点parentNode为null。

var frag = document.createDocumentFragment();
console.log(frag.nodeType);//11
console.log(frag.nodeValue);//null
console.log(frag.nodeName);//'#document-fragment'
console.log(frag.parentNode);//null

 

Document​.create​Document​Fragment()作用

我们经常使用javascript来操作DOM元素,比如使用appendChild()方法。每次调用该方法时,浏览器都会重新渲染页面。如果大量的更新DOM节点,则会非常消耗性能,影响用户体验。javascript提供了一个文档片段DocumentFragment的机制。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点。把所有要构造的节点都放在文档片段中执行,这样可以不影响文档树,也就不会造成页面渲染。当节点都构造完成后,再将文档片段对象添加到页面中,这时所有的节点都会一次性渲染出来,这样就能减少浏览器负担,提高页面渲染速度。

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

 

上一篇: Chrome浏览器控制台Input elements should have autocomplete attributes (suggested: "current-password")  下一篇: vue-cli解决Invalid Host header  

Document​.create​Document​Fragment()文档片段节点相关文章