浏览器渲染页面发生了什么？
导航是浏览器加载页面的第一步。它发生在以下情形：用户通过在地址栏输入一个URL、点击一个链接、提交表单或其他的行为。这其中的细节请移步输入URL到页面显示过程
1. 解析数据
- 一旦浏览器收到数据的第一块，它就开始解析收到的信息。‘解析’是浏览器将通过网络接收的数据转换为
DOM和CSSOM的步骤，通过渲染器把DOM和CSSOM在屏幕上绘制成页面。
2. 构建DOM树
- 浏览器处理
HTML标记并构造DOM树。HTML标记包括开始和结束标记，以及属性名和值。如果文档格式良好，则解析会简单而迅速。解析器将标记化的输入解析到文档中，构建文档树。DOM树描述了文档的内容。<html>元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。DOM节点的数量越多，构建DOM树所需的时间就越长。 - 当解析器发现非阻塞资源，如一张图片或者一个
CSS文件时，浏览器会请求这些资源并继续解析。但是对于<script>标签（特别是没有async或者defer属性）会阻塞渲染并停止HTML的解析。
3. 预加载扫描器
- 浏览器构建
DOM树时，这个过程占用了主线程。这时预加载扫描器将解析可用的内容并请求高优先级资源，如CSS、JavaScript和web字体。预加载扫描仪提供的优化减少了阻塞。
4. 构建CSSOM树
- 浏览器处理
CSS并构建CSSOM树。浏览器将CSS规则转换为可以理解和使用的样式映射。
5. JavaScript编译
- 当
Css被解析并创建CSSOM树时，预加载扫描器也在下载JavaScript文件。JavaScript被解释、编译、解析和执行。脚本被解析为抽象语法树。
*** 接下来就是渲染了 ***
6. 渲染
渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的
CSSOM树和DOM树组合成一个Render树，然后用于计算每个可见元素的布局，最后将其绘制到屏幕上
1. Style
- 将
DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。
2. Layout
- 在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。
3. Paint
- 将各个节点绘制到屏幕上，绘制可以将布局树中的元素分解为多个层，将内容提升到
GPU上的层可以提高绘制性能。
4. Compositing
- 当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
