虚拟DOM和Diff算法

浏览器渲染引擎工作流程大致分为五步：创建Dom树--->创建styleRules--->创建Render树--->布局Layout--->绘制Painting

Dom树的构建是文档加载完成开始的吗？（不是）

Dom树是一个渐进过程，为了更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个HTML文档解析完毕之后才开始构建render树和布局

 

render树是dom树和cssom树构建完毕才开始构建的吗？（不是）

一边加载，一边解析，一边渲染（不完全独立，会存在交差）

 

css的解析是从右往左 逆向解析（从Dom树的下到上解析比上到下小效率更高）的，嵌套标签越多解析越慢

 

js操作真实的DOM的弊端

传统开发模式：原生js操作dom时候，浏览器会从构建dom树开始从头到尾执行一遍流程；

为什么需要虚拟DOM

虚拟DOM是为了解决浏览器性能问题而被设计出来的；

好处：页面 的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然更快，等更新完成后，再将最终的js对象映射成真实的DOM，交给浏览器去绘制。

 

虚拟DOM的存在的意义？

vdom 的真正意义是为了实现跨平台，服务端渲染，以及提供一个性能还算不错 Dom 更新策略。vdom 让整个 mvvm 框架灵活了起来。

 

Diff算法

是同层比较，不能跨层级，存在以下四种情况

diff算法的核心：对比新旧节点的children，更新Dom

diff算法的过程：

都是对比同级节点的

 

 

 

参考：

https://www.jianshu.com/p/af0b398602bc

https://blog.csdn.net/qq_42308316/article/details/108244417?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=0943a1e0-f607-428f-949b-42ac940d3def&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control