浏览器的渲染过程
-
URL 解析 (URL Parsing)：
- 浏览器首先需要解析 URL，确定请求的资源类型、协议、域名、端口和路径等信息。
- 例如，
https://www.example.com/index.html会被解析成协议 (https)、域名 (www.example.com)、路径 (/index.html) 等。
-
DNS 查询 (DNS Lookup)：
- 浏览器需要将域名解析成 IP 地址，才能与服务器建立连接。
- 浏览器会先查询本地 DNS 缓存，如果缓存中没有对应的 IP 地址，则会向 DNS 服务器发起查询请求。
- DNS 查询是一个递归的过程，直到找到对应的 IP 地址。
-
建立 TCP 连接 (TCP Connection)：
- 浏览器使用 IP 地址和端口号与服务器建立 TCP 连接。
- TCP 连接是一个可靠的、面向连接的协议，需要经过三次握手才能建立连接。
-
发送 HTTP 请求 (HTTP Request)：
- 浏览器向服务器发送 HTTP 请求，请求包含请求方法 (GET、POST 等)、请求头和请求体等信息。
- 请求头包含浏览器信息 (User-Agent)、接受的语言 (Accept-Language) 等。
-
服务器处理请求 (Server Processing)：
- 服务器接收到 HTTP 请求后，会根据请求的资源类型和路径进行处理。
- 服务器可能会读取文件、执行脚本、查询数据库等。
-
服务器返回 HTTP 响应 (HTTP Response)：
- 服务器向浏览器返回 HTTP 响应，响应包含状态码、响应头和响应体等信息。
- 状态码表示请求的处理结果，例如 200 OK 表示成功，404 Not Found 表示资源不存在。
- 响应头包含服务器信息 (Server)、内容类型 (Content-Type) 等。
- 响应体包含请求的资源内容，例如 HTML、CSS、JavaScript、图片等。
-
渲染引擎解析 HTML (HTML Parsing)：
- 浏览器接收到 HTTP 响应后，渲染引擎开始解析 HTML 代码，构建 DOM 树 (Document Object Model)。
- DOM 树是一个树形结构，表示 HTML 文档的结构。
-
渲染引擎解析 CSS (CSS Parsing)：
- 渲染引擎解析 CSS 代码，构建 CSSOM 树 (CSS Object Model)。
- CSSOM 树是一个树形结构，表示 CSS 样式的结构。
-
构建渲染树 (Render Tree Construction)：
- 渲染引擎将 DOM 树和 CSSOM 树合并，构建渲染树。
- 渲染树只包含需要渲染的节点，例如
<html>、<body>、<div>等。 - 渲染树不包含不需要渲染的节点，例如
<head>、<script>、display: none的节点等。
-
布局 (Layout)：
- 渲染引擎根据渲染树计算每个节点的位置和大小。
- 布局是一个递归的过程，从根节点开始，计算每个子节点的位置和大小。
-
绘制 (Painting)：
- 渲染引擎将渲染树中的每个节点绘制到屏幕上。
- 绘制是一个将像素填充到屏幕上的过程。
-
合成 (Compositing)：
- 浏览器将多个图层合并成一个图层，并显示在屏幕上。
- 合成可以提高渲染性能，例如使用 GPU 加速。
-
JavaScript 的解析与执行 (JavaScript Parsing and Execution)：
- 如果在 HTML 代码中包含 JavaScript 代码，渲染引擎会暂停 HTML 解析，将 JavaScript 代码交给 JavaScript 引擎执行。
- JavaScript 引擎解析和执行 JavaScript 代码，可以修改 DOM 树和 CSSOM 树，从而改变页面的结构和样式。
- JavaScript 的执行可能会阻塞 HTML 的解析，因此建议将 JavaScript 代码放在
<body>标签的底部，或者使用async和defer属性。
-
重绘与重排 (Reflow and Repaint)：
- 当 DOM 树或 CSSOM 树发生改变时，渲染引擎需要重新计算布局和绘制，这个过程称为重排 (Reflow)。
- 当节点的样式发生改变，但位置和大小没有改变时，渲染引擎只需要重新绘制，这个过程称为重绘 (Repaint)。
- 重排比重绘更消耗性能，应该尽量避免重排。