浏览器关键渲染路径及Vue中的虚拟DOM

一、浏览器渲染页面过程

（浏览器渲染引擎的渲染流程）

1.一、关键渲染路径

关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，而后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。

因此浏览器的渲染过程主要包括如下几步：

1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一块儿生成渲染树。
4. 遍历渲染树开始布局，计算每一个节点的位置大小信息。
5. 将渲染树每一个节点绘制到屏幕。

 二、JS操做真实DOM的代价！

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

 三、虚拟DOM的做用

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。假如像上面所说的，若一次操做中有10次更新DOM的动做，会生成一个新的虚拟DOM，将新的虚拟DOM和旧的进行比较，而后将10次更新的 diff 内容保存到一个JS对象中，最终经过这个JS对象来更新真实DOM，由此只进行了一次操做真实DOM，避免大量无谓的计算量。因此，虚拟DOM的做用是将多个DOM操做合并成一个，而且将DOM操做先所有反映在JS对象中（操做内存中的JS对象比操做DOM的速度要更快），再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

四、实现虚拟DOM

虚拟DOM就是是用JS对象来表明节点，每次渲染都会生成一个VNode。当数据发生改变时，生成一个新的的VNode，经过 diff 算法和上一次渲染时用的VNode进行对比，生成一个对象记录差别，而后根据该对象来更新真实的DOM。本来要操做的DOM在vue这边仍是要操做的，不过是统一计算出全部变化后统一更新一次DOM，进行浏览器DOM的一次性更新。

 

参考：https://baijiahao.baidu.com/s?id=1593097105869520145&wfr=spider&for=pc、https://www.jianshu.com/p/af0b398602bc