js中的文档碎片的理解与使用

最新推荐文章于 2023-10-14 16:35:33 发布

小李想瘦

最新推荐文章于 2023-10-14 16:35:33 发布

阅读量566

点赞数 2

分类专栏： javascript 文章标签： javascript

李耀书要瘦

本文链接：https://blog.csdn.net/weixin_49320962/article/details/116029987

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了DOM操作如何影响浏览器性能，并展示了如何通过使用文档碎片（DocumentFragment）来优化这一过程。虚拟DOM的概念被提及，它同样是在内存中批量处理节点以减少实际DOM操作的次数，提高效率。示例代码展示了如何利用文档碎片一次性修改多个DOM元素，从而减少对页面结构的重排，提升页面性能。

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

首先要了解

在js每次操作dom时都会对DOM进行一次重排，所谓重排也就是当元素的大小，位置结构发生变化的时候，就会引起浏览器对当前页面的结构进行一次重新的计算，这是非常耗费浏览器性能的。

虚拟DOM的出现很好的解决了这一问题，而js中的文档碎片就类似于虚拟DOM。

什么是文档碎片？

document.createDocumentFragment()

利用上述语法，创建一个空的容器，用于存放创建的DOM元素

利用普通的方式修改页面内容

需操作多次DOM才能成功的修改页面内容，如图
在这里插入图片描述

    for (var i = 10; i > 0; i--) {
        var elem = document.createElement('div');
        elem.innerHTML='修改后'
        console.log(elem);
        document.body.appendChild(elem); //放到body中
    }

利用文档碎片进行修改

而利用文档碎片修改，只需要进行一次的DOM操作，即可完成，如图

    // 1、创建一个空的容器
    var fragment = document.createDocumentFragment()
    // console.dir(fragment);
    // 2、获取ul标签
    var li = document.querySelector('#liBox')
    // console.log(li);
    // 判断一下，这个获取到的第一个子节点是否存在
    while (li.firstChild) {
        fragment.appendChild(li.firstChild)
    }

    let child = fragment.childNodes
    // console.log(child);
    // 3、修改
    Array.from(child).forEach(itemNode => {
        /*
         这里不懂得同学可以先打印看一下，只要有换行都有#text
          #text ==>nodeType：3    
          li===>nodeType：1
        */
        // console.log(child); 
        if (itemNode.nodeType === 1) {
            itemNode.innerHTML = '这是修改后的文档碎片'
        }
    })
    // console.log(frag);
    // 4、将frag进行添加
    li.appendChild(fragment)

在这里插入图片描述

类似于虚拟DOM的思想，在内存中先开辟出一块地方，对于所有节点的操作都在内存中先完成，完成后再一次更新到页面中，又花了浏览器的性能。

最后，完整代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档碎片</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul id="liBox">
        <li>这是一个文档碎片</li>
        <li>这是一个文档碎片</li>
        <li>这是一个文档碎片</li>
        <li>这是一个文档碎片</li>
        <li>这是一个文档碎片</li>
    </ul>
</body>

</html>
<script>
    var fragment = document.createDocumentFragment()
    var li = document.querySelector('#liBox')
    while (li.firstChild) {
        fragment.appendChild(li.firstChild)
    }

    let child = fragment.childNodes
    // 3、修改
    Array.from(child).forEach(itemNode => {
        if (itemNode.nodeType === 1) {
            itemNode.innerHTML = '这是修改后的文档碎片'
        }
    })
    li.appendChild(fragment)
    console.log(li);
</script>