html页面加载流程 虚拟dom

21.html页面加载流程_哔哩哔哩_bilibili

网页是不停的在画画，重绘

创建dom树——创建StyleRules——创建render树——重排Layout——重绘painting

1. 用html分析器，分析html元素，创建一颗DOM树。转化为js对象，类似编译原理的词法分析和语法分析过程，只能一个一个字符分析

2. 用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表，CSSOM树，CSS是逆向解析，从内向外冒泡，嵌套标签越多，解析越慢

3. 将DOM树和样式表关联起来，构成一颗Render树，这一过程又称为Attachment，每个DOM节点都有attach,，接受样式信息，返回一个render对象，这些render对象最终会被构建成一颗Render树

4. 有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标【为了提高性能，减少重排，减少对高度和js节点的获取更改操作，减少重新加载相应的计算流程】

5. Render树和节点显示坐标都有了，就调用每个节点的paiint方法，将她们绘制出来

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

一边加载 一边解析 一边渲染 相互交叉

虚拟dom

22.虚拟DOM的优缺点_哔哩哔哩_bilibili

浏览器操作dom是同步的，所以消耗了很多更新次数，所以用js对象虚拟dom的好处是：页面的更新可以先全部反映在js对象（虚拟DOM）上，操作内存中的js对象的速度显然要比浏览器快得多，等更新完成之后，再将最终的js对象映射成真实的DOM。交由浏览器去绘制

diff【different】算法——提升性能-优快云博客