createDocumentFragment()用法总结

吴所畏惧

于 2024-03-25 21:15:14 发布

阅读量1.4k

点赞数 29

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_42575028/article/details/137025676

版权

本文总结了createDocumentFragment()的用法，它用于创建文档片段，避免页面回流，提高性能。文档片段在内存中，插入时替换为子孙节点。对比innerHTML，DocumentFragment更灵活且不影响性能，适合大量DOM操作。此外，文中还讨论了DocumentFragment与其他方法的差异和兼容性问题。

摘要由CSDN通过智能技术生成

createDocumentFragment()用法总结

1.描述

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

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

2.关于DocumentFragment

createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。
DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。
如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
createDocumentFragment()方法和createElement()方法的区别：

(1) 需要很多的插入操作和改动，继续使用类似于下面的代码则会很有问题

var ul = document.getElementById("ul");
for (var i = 0; i < 20; i++) {
   
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    ul.appendChild(li);
}

由于每一次对文档的插入都会引起重新渲染（计算元素的尺寸，显示背景，内容等），所以进行多次插入操作使得浏览器发生了很多次渲染，效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差，很难符合创建各种各样的DOM元素的需求。利用DocumentFragment，可以弥补这两个方法的不足。

因为文档片段存在于内存中，并不在DOM中，所以将子元素插入到文档片段中时不会引起页面回流（对元素位置和几何上的计算），因此使用DocumentFragment可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。

var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
   
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    fragment.appendChild(li);
}
ul.appendChild(fragment);

(2) createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，createElement创建的是元素节点，节点类型为1，createDocumentFragment创建的是文档碎片，节点类型是11。并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到。