- 解析
- 处理HTML生成DOM树
- 预加载扫描器
- AOM（可访问对象模型）：辅助设备用于分析和解释内容
- 处理CSS生成样式树
- 将DOM树和样式树合并成render树
- 对render树进行布局计算，生成盒模型
- 绘制信息
- 合成涂层（复合层）
解析
浏览器收到第一块数据就开始解析收到的信息。“解析”是浏览器将网络接收的数据转换为DOM和CSSOM的步骤，通过渲染器把DOM和CSSOM在屏幕上绘制成页面。
构建DOM树
处理html标记并构造DOM树
HTML解析涉及到标记化和树的构造。HTML标记包括开始和结束标记，以及属性名和值。解析器将标记化的输入解析到文档中，构建文档树。DOM树描述了文档的内容。树反映了不同标记之间关系和层次结构。
当解析器发现非阻塞资源时，浏览器会请求这些资源并且继续解析。<script>会阻塞渲染并停止HTML的解析。浏览器构建DOM树的过程占用了主线程。预加载扫描仪将解析可用的内容并请求高优先级资源。
构建CSSOM树
浏览器将CSS规则转换为可以理解和使用的样式映射。浏览器遍历CSS中每个规则集，根据CSS选择器创建具有父、子和兄弟关系的节点树。
构建辅助功能树
浏览器还构建辅助设备用于分析和解释内容的辅助功能（accessibility）树。可访问性对象模型（AOM）类似于DOM的语义版本。当DOM更新时，浏览器会更新辅助功能树。
渲染
渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。
在解析步骤中创建的CSSOM树和DOM树组合成一个render树，计算每个可见元素的布局，然后将其绘制到屏幕上。
样式
将DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。head和它的子节点以及具有display：none样式的节点不会出现在Render树上。
布局
在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。构建渲染树后，开始布局。渲染树标识显示哪些节点，但不标识每个节点的尺寸或者位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始遍历，生成盒模型。 回流是对页面的任何部分或者整个文档的任何后续大小和位置的确定。第一次确定节点的大小和位置称为布局。之后对节点大小和位置的重新计算称为回流。
绘制
将各个节点绘制到屏幕上。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘制可以将布局树中的元素分解为多个层。将内容提升到GPU上的层可以提高绘制和重绘性能。video和canvas这种元素可以实例化一个层。
合成
当文档的各个部分以不同的层绘制，相互重叠时，需要进行合成，以它们以正确的顺序绘制到屏幕上，并正确显示内容。回流会触发重新绘制和重新组合。
补充
使用GPU渲染的优点：
- 动画平滑流畅，每秒60帧
- 3D变化更轻松
使用GPU渲染的缺点：
- 图层会传输到GPU，传输过程可能会缓慢，让元素在中低档设备上闪烁
- 提升一个元素到复合层需要额外的重绘，有时候比较慢
- 可能占用较高内容
为什么开启硬件加速动画就会变得流畅?
- 将需要动画的元素提升一个单独的复合层，避免浏览器对整体进行重排和重绘
- 将浏览器使CPU绘制位图实现的动画效果改为由GPU使用合成图层实现动画
- 如果图片未改变，GPU直接使用缓存来绘制图层，通过改变图片之间的相对位置来实现动画，节省时间。
什么是光栅化（Rasterize）？
光栅化的本质是坐标变换、几何离散化，然后填充。
