Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述.
真实DOM和其解析流程:
创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
第一步: 利用HTML分析器,分析HTML元素,构建一颗DOM树
第二步: 利用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表
第三步:将DOM树和样式表关联起来,构建一颗Render树(这一过程又称为Attachment).每个DOM节点都有attach方法,接受样式信息
返回一个render对象(又称renderer).这些render对象最终会被构建成一颗Render树
第四步:浏览器将每个Render树上的节点确定一个在显示屏出现的精确坐标
第五步:Render树和节点坐标都有了,调用每个节点的paint方法,将他们绘制出来
DOM树不是等到整个HTML文档解析完之后才开始构建的,构建DOM树是一个渐进的过程,渲染引擎会尽快的将内容显示到屏幕上
CSS的解析是从DOM树的下-上开始解析的 ,嵌套标签越多,解析越慢。
Render树是DOM树和CSSOM树并行构建的,这三个过程是并行的
Dom操作会导致浏览器重新绘制Dom树,然后渲染到浏览器上,这样每次重新绘制白白浪费计算机性能;
虚拟Dom就是为了解决浏览器性能问题而被设计出来的,将页面的更新全部反映到JS对象上,操作内存中的JS对象的速度显然要更快
,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。
----简单来说:记录虚拟树新树和旧树的差异,将差异更新到真实树上
Diff算法:完成这种差异