Vue虚拟dom相关

最新推荐文章于 2023-09-11 16:12:35 发布

勾勾g

最新推荐文章于 2023-09-11 16:12:35 发布

阅读量90

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/weixin_42695446/article/details/84680213

版权

Vue.js 虚拟DOM diff算法性能优化内存数据

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/mrliber/article/details/79036828
https://blog.csdn.net/weixin_42695446/article/details/84680213

在vue内部的话，其实有虚拟dom
虚拟dom其实是里面内存型对象（js内存对象）属于内存数据真实dom的一层映射
Vue广受欢迎以及相应速度快的关键就是虚拟dom的广泛应用

虚拟dom生成真实dom过程

1.内存中生成一颗虚拟dom树

  <div id="content"><p>2</p><ul class="list-group"></ul></div>
        var vDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"}}
            ]
        }

2.将内存中的虚拟dom树初始化渲染成真实dom树

3.当我们修改data里面的数据的时候

    data.arr.push("<li>111111</li>")
    data.arr.push("<li>222222</li>")

4.将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树

5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）

6.将对比出来的差异的部分进行重新真实dom结构的渲染

分析：

内部当数据变化，生成一颗新的虚拟dom树，与上一次的虚拟dom树结构进行对比。也就是说，当数据变化的时候，
大量操作的是虚拟dom,而虚拟dom属于内存数据，操作起来性能要高的多。而真实的dom操作，只有在追加的那一刻
才会进行操作，大大提升了性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div id="content">
        <p>{{ 1+1}}</p>
        <ul class="list-group">
            
        </ul>
    </div>

    <div id="myp">1</div>
    <script src="./base/vue.js"></script>

    <script>



        var data = {
            arr:[]
        }

        //1.内存中生成一颗虚拟dom树         <div id="content"><p>2</p><ul class="list-group"></ul></div>
        var vDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"}}
            ]
        }

        //2.将内存中的虚拟dom树初始化渲染成真实dom树
        //3.当我们修改data里面的数据的时候
        data.arr.push("<li>111111</li>")
        data.arr.push("<li>222222</li>")
        //4.将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
        var newDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"},children:[
                    {tag:"li",content:"11111"},
                    {tag:"li",content:"22222"}
                ]}
            ]
        }
        //5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）
        //6.将对比出来的差异的部分进行重新真实dom结构的渲染


        /*
            内部当数据变化，生成一颗新的虚拟dom树，与上一次的虚拟dom树结构进行对比。也就是说，当数据变化的时候，
            大量操作的是虚拟dom,而虚拟dom属于内存数据，操作起来性能要高的多。而真实的dom操作，只有在追加的那一刻
            才会进行操作，大大提升了性能。
        */






        
        //执行10000次代码  0.3ms
        // let myp = document.getElementById("myp")
        // let num = 1
        // console.time("temp")
        // for(var i=0;i<10000;i++){
        //     num++
        // }
        // myp.innerHTML = num
        // console.timeEnd("temp")
        

        
        //执行10000次代码  35ms
        // let myp = document.getElementById("myp")
        // console.time("temp")
        // for(var i=0;i<10000;i++){
        //     let num = myp.innerHTML*1
        //     myp.innerHTML = ++num
        // }
        // console.timeEnd("temp")


    </script>
        
    </script>
    
</body>
</html>