虚拟DOM和真实DOM

一、虚拟DOM

1、概念相关

• 是一个JavaScript对象，通过对象的方式来表示DOM结构，是对DOM的抽象
• 以对象的形式来描述真实DOM结构，最终渲染到页面
• 在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进 行比较
• 在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染

• 无须手动操作DOM

• 一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码

• 另一方面更重要的是省略手动DOM操作可以大大提高开发效率

2、解析过程

• 首先对将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来，比如一个元素对象，包含 TagName、props 和 Children 这些属性。然后将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档 中。

• 当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵 对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。

• 最后将记录的有差异的地方应用到真正的 DOM 树中去，这样视图就更新了

3、优点

• 保证性能下限，在不进行手动优化的情况下，提供过得去的性能

　　　　看一下页面渲染的流程：解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler

• 跨平台

　　　　本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。

• 比真实DOM性能好
  • 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
  • 在使用真实DOM操作的时候进行针对性的优化时，还是更快

二、虚拟DOM和真实DOM的区别

1. 真实DOM∶ 生成HTML字符串＋重建所有的DOM元素

2. 虚拟DOM∶ 生成vNode虚拟节点+ DOMDiff算法＋必要的dom更新

 三、使用vnode来描述一个DOM结构

1、流程：template->ast语法树->通过codegen转化成render函数->内部调用的就是_c方法->vnode

【template编译出来的是render函数，render函数中会给你一个createElement，createElement执行之后才是vnode】

 vnode虚拟节点就是用一个对象来描述真实的 dom 元素

 在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode

 

vue中实现：先将dom转换成ast语法树再生成vnode

<ul id='test'>
    <p class='hehe'>这里是p标签</p>
    <li>{{1+1}}</li>
</ul>

let vdom = {
    tag: 'ul',
    props: {
        id: 'test'
    },
    children: [
        {
        tag: 'p',
        props: {
            class: 'hehe'
        },
        children: '这样是p标签'
        },
        {
        tag: 'li',
        children: '2'
        }
    ]
}