vue 虚拟DOM

真实DOM、解析流程

webkit渲染引擎工作流程：

• 创建DOM树：用HTML分析器，分析HTML元素，构建DOM树
• 创建Style Rules：用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表
• 构建Render树：将DOM树和样式表关联起来，构建Render树
• 确定节点坐标：根据Render树结构，为每个Render树上的节点确定一个在显示屏上出现的精确坐标
• 绘制页面：根据Render树和节点显示坐标，调用每个节点的paint方法，绘制出来

虚拟DOM

虚拟DOM本质上就是一个普通的JS对象，用于描述试图的界面结构

为什么需要虚拟DOM

在vue中，渲染视图会调用render函数，如果在渲染时，直接使用真实DOM，真实DOM携带太多的属性和方法，操作起来会带来大量的性能损耗，并且会有重绘和回流的问题，降低渲染效率。使用虚拟DOM代替真实DOM，可以解决渲染效率问题

虚拟DOM时如何转换为真实DOM的

在一个组件实例首次被渲染时，它先生成虚拟DOM树，深度优先遍历结点，setAttribute,然后根据虚拟DOM树创建真实DOM，并把真实DOM挂载在页面中合适的位置。

diff算法与虚拟DOM的关联

diff算法用来比较两颗虚拟DOM树的差异，在前端，很少会跨层级移动DOM元素，所以虚拟DOM只会对同一个层级的元素进行对比。