简述浏览器的渲染过程

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

导语

浏览器的渲染过程是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，知道展现出最终页面给用户的一个总体的过程。那么这个结果经历了哪些过程呢？

浏览器的主要结构组件

要了解浏览器的渲染过程，首先要了解浏览器是有哪些功能结构组成的

1. 网络层

负责网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现

2. JS解释器

用于解析和执行 JavaScript 代码

3. 用户界面后端

用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法

4. 渲染引擎

负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上

5. 浏览器引擎

在用户界面和渲染引擎之间传送指令

6. 用户交互界面

包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面

7 数据存储持久层

浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库

结构如下：

浏览器的渲染过程主要是通过渲染引擎来完成。

浏览器渲染过程

1. 解析HTML生成DOM树。

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。生成DOM树是通过浏览器渲染引擎来负责的，在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。

2. 构建CSSOM规则树

CSSOM: CSS Object Model，树形形式的所有CSS选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。构建CSSOM树的过程和构建DOM的过程时类似的，通过渲染引擎计算每个DOM的样式。

3. 构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。

4. 渲染树布局

通过分析渲染树，计算各个DOM的位置和大小，进行布局。通过浏览器控制台分析布局事件，优化布局和代码，尽量做到批量布局，避免出现多个布局事件。

5. 绘制

根据渲染树计算出的元素位置和大小进行绘制，最终展现出来。

关键渲染路径

以上是浏览器的渲染过程，整个过程构成了浏览器的关键渲染路径