浏览器解析

当你在浏览器地址栏输入一个地址（比如 https://www.example.com）并按下回车后，浏览器在百分之一秒内完成了一系列复杂且精密的操作。

整个过程可以大致分为以下几个核心步骤：

第一步：解析 URL

浏览器首先会解析你输入的地址，判断它是什么。

• 是搜索关键词吗？ 如果你输入的不是一个合法的 URL 格式（比如直接输入了“如何学习编程”），浏览器会使用默认的搜索引擎进行搜索。
• 是合法的 URL 吗？ 如果是，浏览器会将其拆解成各个部分（协议、主机名、端口、路径等）。例如：
  • 协议： https
  • 主机名： www.example.com
  • 端口： https 默认是 443（如果没指定）
  • 路径： /（如果没指定）

第二步：检查缓存（HSTS 预加载列表）

在进行网络请求之前，浏览器会进行一项重要的安全检查：检查 HSTS 预加载列表。

• HSTS 是一个安全策略，它强制浏览器只能使用 HTTPS 与网站通信，即使你输入的是 http://。
• 浏览器内部维护了一个“HSTS 预加载列表”，里面包含了许多强制使用 HTTPS 的网站。如果目标网站在这个列表里，浏览器会直接使用 https 发起请求，即使用户输入了 http。

第三步：DNS 解析（域名解析）

这是最关键的一步。互联网通过 IP 地址（如 93.184.216.34）来定位服务器，而不是人类容易记忆的域名（如 www.example.com）。DNS 解析就是将域名转换成 IP 地址的过程。

浏览器会按照以下顺序查找 DNS 记录：

1. 浏览器缓存：浏览器会首先检查自己的缓存里是否有这个域名对应的 IP 地址。
2. 操作系统缓存：如果浏览器缓存没有，它会去查询操作系统的缓存（在 Windows 上是 hosts 文件，以及系统 DNS 缓存）。
3. 路由器缓存：请求会发送到你的路由器，路由器也有自己的 DNS 缓存。
4. ISP 的 DNS 服务器：如果以上都没有，请求会到达你的互联网服务提供商（如中国电信、中国移动）的 DNS 服务器。
5. 递归查询：ISP 的 DNS 服务器会开始一个递归查询过程：
   • 从 根域名服务器 开始询问（它知道所有顶级域名服务器的地址）。
   • 根域名服务器告诉它 .com 顶级域名服务器的地址。
   • 然后去问 .com 顶级域名服务器，它知道 example.com 的权威域名服务器的地址。
   • 最后去问 example.com 的权威域名服务器，它返回 www.example.com 的真实 IP 地址。
6. 返回 IP：ISP 的 DNS 服务器拿到 IP 后，会缓存起来，并将结果返回给你的浏览器。

DNS 负载均衡：对于一些大型网站，DNS 解析可能会返回多个 IP 地址，并根据用户的地理位置返回一个最优的地址，这叫做 DNS 负载均衡。

第四步：建立 TCP 连接（三次握手）

拿到 IP 地址后，浏览器需要通过 TCP 协议与服务器建立一个可靠的连接。这个过程就是著名的“三次握手”：

1. SYN： 浏览器向服务器发送一个 SYN 包（同步序列编号），表示请求建立连接。
2. SYN-ACK： 服务器收到后，回复一个 SYN-ACK 包，表示同意建立连接。
3. ACK： 浏览器再回复一个 ACK 包，表示确认。至此，TCP 连接建立成功。

第五步：建立 TLS 连接（SSL/TLS 握手 - 仅 HTTPS）

如果使用的是 HTTPS 协议，在 TCP 连接建立后，还需要进行 SSL/TLS 握手（详见我上一个回答），以建立一个安全的加密通道。主要步骤包括：

• 协商加密套件。
• 服务器发送 SSL 证书。
• 浏览器验证证书。
• 生成会话密钥。
• 开始加密通信。

第六步：发送 HTTP 请求

安全通道建立后，浏览器终于可以发送真正的 HTTP 请求了。这个请求报文包含了：

• 请求行： 方法（GET, POST 等）、路径、HTTP 版本。
• 请求头： 包含浏览器信息（User-Agent）、接受的数据类型（Accept）、Cookie（如果有的话）等。
• 请求体： 如果是 POST 请求，还会包含发送的数据。

第七步：服务器处理请求并返回响应

服务器收到请求后，会根据路径和参数进行处理（比如调用后端程序、查询数据库等），然后组装一个 HTTP 响应返回给浏览器。响应报文包括：

• 状态行： HTTP 版本、状态码（如 200 OK, 404 Not Found）。
• 响应头： 包含服务器信息、内容类型（Content-Type）、内容长度等。
• 响应体： 请求的实际内容，通常是 HTML、CSS、JS 文件或图片等。

第八步：浏览器解析和渲染页面

浏览器收到响应后，就开始最复杂的工作——解析和渲染，将代码变成用户看到的页面。

1. 解析 HTML，构建 DOM 树：浏览器解析 HTML 代码，构建出文档对象模型（DOM）树结构。
2. 解析 CSS，构建 CSSOM 树：浏览器解析 CSS 代码（包括外部样式表、内联样式），构建出 CSS 对象模型（CSSOM）树。
3. 合并 DOM 和 CSSOM，构建渲染树：将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree），它只包含需要在屏幕上显示的元素及其样式。
4. 布局：计算渲染树中每个元素在视口（viewport）内的确切位置和大小。这个过程也叫“重排”。
5. 绘制：将布局计算后的每个节点转换成屏幕上的实际像素，包括文本、颜色、边框、阴影等。
6. 合成与显示：将各层绘制结果合成起来，最终显示在屏幕上。

在这个过程中，如果遇到 <script> 标签（尤其是没有 async 或 defer 属性的），浏览器会停止构建 DOM，先下载并执行 JavaScript 代码，因为 JS 可能会修改 DOM 结构。

第九步：TCP 断开连接（四次挥手）

当页面加载完成，或连接空闲一段时间后，TCP 连接会被关闭。这个过程是“四次挥手”：

1. FIN： 浏览器发送一个 FIN 包，表示数据发送完毕，请求关闭连接。
2. ACK： 服务器回复一个 ACK 包，表示同意关闭。
3. FIN： 服务器也发送一个 FIN 包，表示它这边也数据发送完毕。
4. ACK： 浏览器回复一个 ACK 包，确认关闭。连接终止。

总结流程图

image.png

这个过程看似漫长，但在现代浏览器和网络环境下，通常都在几百毫秒内完成，为用户提供了流畅的体验。