浏览器渲染页面的大致过程

[图片上传失败...(image-735179-1630336184679)]

1. 渲染引擎启动html解释器(htmlParser)解析html源码，根据DOM API创建dom tree，Browser进程并行下载网络资源(css/image/js...)。
   在dom树中，每个html标签都有一个对应的节点，每个文本也有对应的文本节点，根节点就是documentElement,对应的是html节点。当遇到script节点时，将启动js引擎解析脚本，此时会阻塞DOM树的构建。
   当DOM树构建完成时，DOMContentLoaded事件会被触发。
   当DOM树构建完成，并且页面依赖的资源(图片、视频等) 都下载完了，onload事件会被触发。

2. 渲染引擎启动css解释器(cssParser,cssGrammer)处理css源码，计算出最终样式，根据CSSOM API(css对象模型)构建cssRuleTree(css规则树)，忽略其中的非法语法。

3. 渲染引擎将domTree和cssRuleTree 合成rendering tree（渲染树），计算各个节点在页面上的布局或排版，忽略head、display:none的元素，每行都是独立的文本节点，每个节点都有对应的css。

4. 当渲染树创建后，浏览器就会绘制(paint)页面到屏幕上。

这个过程并不是一次完成，实际上css和js会多次修改dom或者cssom。

重排/回流以及重绘

重排(reflow):元素的宽高引起布局的改变，就需要重排，重排后一定会重绘；
重绘(repaint):元素的颜色、透明度、字体样式变化会重绘，重绘不一定引起重排；

引起重排：

1. 添加删除可见的dom元素；
2. 元素位置、大小的变化；
3. 内容改变；
4. 页面渲染器初始化；
5. 浏览器窗口大小改变；

避免重排和重绘：

1. 使用类名来切换样式；
2. 多个样式写在一起；
3. 批量修改样式（先将需要改变的部分隐藏起来（display:none）,修改后再展示）
4. 缓存布局信息（offsetLeft，clientTop）；当需要多次获取这些信息时，将其保存在一个临时变量中，通过访问变量得到这些值。
5. 使用visible:hidden;代替display：none;