vue虚拟dom树

最新推荐文章于 2023-08-11 08:33:51 发布

hardwork come on

最新推荐文章于 2023-08-11 08:33:51 发布

阅读量1.5k

点赞数

分类专栏：技术前端文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43353869/article/details/105057329

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

技术

13 篇文章 0 订阅

订阅专栏

在vue中,有一个虚拟的dom树的概念：
浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

二、JS操作真实DOM的代价！
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

三、为什么需要虚拟DOM，它有什么好处?
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

    虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

虚拟dom的流程

  <div id="content">
            <p>{{1+1}}</p>
            <ul class="list-group">

            </ul>
        </div>
        <div id="myp">1</div>
      <script src="vue/vue.js"></script>
      <script>
          var data={
              arr:[]
          }
      /*
        虚拟dom其实是里面内存性对象(js内存对象)属于内存数据
        其实dom的一层映射*/
        //1.内存中生成一个虚拟dom树（就是一个js 的对象）
        //先js对象生成虚拟dom树，然后在生成真的dom树<div id="content"><p><ul class="list-group"></ul></p></div>
        var  vDom={
            tag:'div',
            attrs:{
                id:'content'
            },
            children:[
                {tag:'p',content:2},
                {tag:'ul',attrs:{className:'list-group'}}
            ]
        } 
        /*
        2.将内存中的虚拟dom树村式化渲染成真始dom树
        3.当我们 修改data里面的数据的时候   */
        data.arr.push('<li>11111</li>')
        data.arr.push('<li>22222</li>')
        //4.将之前的的虚拟dom树结合新的数据生成一个新的虚拟dom树
        var newDom={
            tag:'div',
            attrs:{
                id:'content'
            },
            children:[
                {tag:'p',content:2},
                {tag:'ul',attrs:{className:'list-group'},children:[
                    {tag:'li',content:'111'},
                    {tag:'li',content:'222'}
                ]}
            ]
        }
        //5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比,对比是通过(diff算法)
        //6.将对比出来的差异的部分进行重新真式dom结构的渲染
        //(将新的dom树和上一个虚拟dom做对比,把有差异的部分渲染,其它的保持不变直接复用,有变化的直接去更能改)
        /*
        #### 虚拟DOM的Diff算法

> 虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
**> 

## **

 一. 在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。**

**

1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容。
4.移动，增加，删除子节点时：
        内部当数据变化,生成一个新的虚拟dom树,与上一次的虚拟dom树结构进行对比。也就是，当数据变化的时候,大量操作的是虚拟dom，而虚拟dom是js对象(内存数据),操作器起来性能要高的多,而真的
        dom操作，只有在追加的拿那一时才会进行操作,大大的提升性能和效率
        */
        </script>

如果想在中间插入节点F，简单粗暴的做法是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E。如下图：
在这里插入图片描述