DocumentFragment

·  阅读 57

看到有的地方创建元素节点的时候,使用createDocumentFragment,而不是使用createElement,因此比较好奇,查看二者的差异,主要是对性能影响比较大,如果对dom节点存在大量的增删操作的话,建议使用createDocumentFragment,可以减少浏览器的重绘回流

相关代码如下:

    node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(),
            child;

        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }

        return fragment;
    },
复制代码

createElement

var e1 = document.createElement('div'); 
console.log(e1.nodeType); // 1
复制代码
  • 是元素节点,nodeType=1
  • 作用:用于创建一个由标签名称 tagName 指定的 HTML 元素
  • 追加元素,可以使用appendChild,
    • 该方法是将一个节点附加到指定父节点的子节点列表末尾处
    • 这个节点已经存在当前文档树中,那么它的位置会发生移动,移动到新的位置
    • 该节点插入方式,是插入它本身和它的所有子孙节点
    • 插入页面后,依旧可以对该节点重复操作,只是重复多次发生位置移动问题。

createDocumentFragment

var e2 = document.createDocumentFragment();
console.log(e2.nodeType); // 11
复制代码
  • 是文档碎片,nodeType=11
  • 作用:创建一个新的空白的文档片段
  • 意义:文档片段存在与内存中,并不在DOM树种,将子元素插入到文档片段时不会引起页面回流
  • 追加元素,可以使用appendChild,
    • 该方法是将一个节点附加到指定父节点的子节点列表末尾处
    • 这个节点已经存在当前文档树中,那么它的位置会发生移动,移动到新的位置
    • 该节点插入方式,是插入所有子孙节点
    • 如果该文档片段,被追加到某个节点下,就不能在对它操作,它属于一次性操作。(用白话文说,用createDocumentFragment创建的文档节点,被添加到某个元素下,文档碎片里的内容就没了,然后再让他继续添加到其他元素下,是不会成功的,除非是内容重新追加到文档节点里)
<body>
    <div id="aaaa">
        <div id="b">
            <div id="b1"></div>
            <div id="b2"></div>
        </div>
        <div id="c">
            <div id="a1"></div>
            <div id="a2"></div>
        </div>
    </div>
    <div id="dddd"></div>
    <div id="ffff"></div>
    <div id="gggg"></div>
</body>
</html>
<script>
    window.onload=function(){
        var el = document.getElementById("aaaa")
        var fragment = document.createDocumentFragment(),
            child;

        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }

        document.getElementById("dddd").appendChild(fragment)// 文档碎片里的内容已经被填充进去,如果再填充到对应的节点下,是没有内容的
        fragment.appendChild(document.getElementById("gggg"))// 重新追加内容到碎片里,追到新的元素节点下
        document.getElementById("ffff").appendChild(fragment)
    }

</script>
复制代码

参考链接:

Node 和 Element

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改