浏览器渲染页面多的流程（参考网上有关资料整理）

Posted 2021-03-25 violinh

浏览器渲染页面也就表示我们网上的资源已经请求成功

首先我们要明确浏览器渲染页面大致分为这几个步骤

1.浏览器解析html文档从而使构建成dom文档树=>2.构建render树=>3.布局render树=>4.绘制render树

1．浏览器会将html文档解析成一个dom文档树，dom树构建的过程是一个深度遍历的过程，只有当当前节点的所有子节点都构建好了以后，才会去构建当前节点的下一个兄弟节点。Dom树的构建过程为：将字节转换成字符，确定tokens，将tokens转换成节点，然后构建dom树

2．接下来再解析css样式，得到css规则树（cssom）

3．根据得到的dom树和css来构建render树，渲染树不等于dom树，像header和display：none；这种没有具体内容的东西就不会出现再渲染树中

4．根据render树，浏览器可以计算出网页中有哪些节点，以及各个节点的css从属关系，然后计算出每个节点再屏幕中国的位置

5．遍历render树进行绘制页面中的各个元素

(页面重拍(回流)的话，会重新加载dom树，影响页面加载速度)

导致页面重拍的原因如下

(1).页面初始化

(2).操作dom时

(3).某些元素发生改变时

(4).css的属性发生改变时

浏览器在解析html的过程中：它采用的是自上而下的解析方式，

在页面中重绘和重排一般会在(1)增加或删除dom节点(2)display:none(重排并重绘)；visibility:hidden(重排)(3)移动页面中的元素的时候(4)增加或者修改样式的时候(4)用户改变窗口大小，滚动页面的时候触发

减少重绘和重排提高页面性能的方法

就是将它所要替换的属性提前先写好，当触发某个事件的时候，只要改变他的classname即可