浏览器渲染引擎工作流程大致分为五步:创建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算法的过程:
都是对比同级节点的
参考: