从输入 URL 到页面展示全过程

从输入 URL 到页面展示是一个复杂的、多步骤的过程，涉及浏览器、网络协议、操作系统、服务器等多个组件。这个过程可以分解为以下几个关键阶段：

1. URL 解析

• 行为：用户在浏览器地址栏输入 URL（例如 https://www.example.com/page）并按下回车。

• 解析：浏览器会解析这个 URL，将其分解为：

  • 协议（Scheme） : https
  • 主机名（Host） : www.example.com
  • 端口（Port） : HTTPS 默认是 443（如未指定则用默认端口）
  • 路径（Path） : /page
  • 查询参数（Query）和片段（Hash） : 如果有的话

• 下一步：浏览器需要将主机名转换成服务器的 IP 地址。这通过 DNS 解析​ 完成。

2. DNS 解析

• 查找顺序：浏览器会按以下顺序查找域名对应的 IP 地址：

  1. 浏览器缓存：检查自身是否有缓存。
  2. 操作系统缓存：检查系统的 Hosts 文件和 DNS 缓存。
  3. 路由器缓存：查询本地路由器。
  4. ISP DNS 缓存：向互联网服务提供商（ISP）的 DNS 服务器发起查询。
  5. 递归查询：如果 ISP 的 DNS 服务器没有缓存，它会从根 DNS 服务器开始，依次查询 .com顶级域服务器、example.com的权威域名服务器，最终获得 www.example.com的 IP 地址。

• 结果：获取到目标服务器的 IP 地址（如 93.184.216.34）。

3. 建立 TCP 连接

浏览器拿到 IP 地址和端口后，会通过操作系统的网络接口，发起与服务器的网络连接。对于 HTTPS 协议，这个过程包括：

• TCP 三次握手：

  1. SYN：客户端（浏览器）发送一个 SYN 包（同步序列号）到服务器。
  2. SYN-ACK：服务器收到后回复一个 SYN-ACK 包。
  3. ACK：客户端再回复一个 ACK 包。至此，TCP 连接建立成功。

• TLS 握手（仅 HTTPS）：

  1. ClientHello：客户端向服务器发送支持的加密套件列表和随机数。

  2. ServerHello：服务器选择加密方式，发送数字证书和另一个随机数。

  3. 验证与密钥交换：客户端验证证书合法性，生成预备主密钥并用证书公钥加密后发送给服务器。

  4. 生成会话密钥：双方用三个随机数生成相同的对称会话密钥，用于后续通信的加密解密。

     • 至此，安全的 HTTPS 连接建立完成。

4. 发送 HTTP 请求

连接建立后，浏览器会构造一个 HTTP 请求报文，并通过连接发送给服务器。请求报文主要包含：

• 请求行：GET /page HTTP/1.1（方法、路径、协议版本）
• 请求头：Host, User-Agent, Accept, Cookie, Connection等信息。
• 请求体：对于 POST 等方法，会包含发送的数据。

5. 服务器处理请求并返回响应

服务器收到请求报文后，会进行处理：

• Web 服务器（如 Nginx, Apache）接收请求，并根据配置将其转发给后端的应用服务器（处理动态内容的程序，如 Node.js, Tomcat, Django）。

• 应用服务器执行相应的业务逻辑（如查询数据库、处理业务），生成最终的 HTTP 响应内容。

• 服务器发回一个 HTTP 响应报文，主要包含：

  • 状态行：HTTP/1.1 200 OK（协议版本、状态码、状态信息）。
  • 响应头：Content-Type, Content-Length, Set-Cookie, Cache-Control等。
  • 响应体：请求的实际数据（HTML、JSON、图片等）。

6. 浏览器解析与渲染

浏览器收到服务器响应后，开始解析和渲染页面。这是一个流水线式的过程，主要步骤包括：

• A. 构建 DOM 树：

  • 解析 HTML 字节流，将其转换为字符，再通过词法、语法分析，构建出文档对象模型树。

• B. 构建 CSSOM 树：

  • 解析 CSS 样式（包括内联、外部、用户样式），生成 CSS 对象模型树。

• C. 执行 JavaScript：

  • 在解析 HTML 时，遇到 <script>标签会暂停 DOM 构建，下载（如果是外部脚本）并执行 JavaScript 代码。脚本可以修改 DOM 和 CSSOM。async和 defer属性可以改变脚本的加载和执行时机。

• D. 构建渲染树：

  • 将 DOM 树和 CSSOM 树合并，去除不可见的节点（如 head, display: none），生成一棵描述所有可见节点样式和内容的渲染树。

• E. 布局：

  • 计算渲染树中每个节点在设备视口内的确切位置和大小。这个过程也称为“重排”。

• F. 绘制：

  • 将布局计算出的每个节点转换成屏幕上的实际像素。包括填充颜色、边框、阴影、文本等。这个过程也称为“重绘”。

• G. 合成与显示：

  • 浏览器将页面分成多个图层，分别进行绘制。合成线程将各图层合并，最终通过 GPU 将合成后的位图显示在屏幕上。

7. 加载子资源

在解析 HTML 过程中，遇到外部资源链接（如 <img>, <link>, <script src>）时，浏览器会：

1. 对每一个资源，重新发起 DNS 查询 -> TCP 连接 -> HTTP 请求​ 的过程（许多连接可以复用，并受到浏览器并发连接数的限制）。
2. 下载这些资源（图片、CSS、字体、脚本等）。
3. 部分资源的加载可能会触发页面的重绘或重排。

关键优化点

• DNS 预取：<link rel="dns-prefetch">。
• TCP/TLS 优化：TCP 快速打开、TLS 1.3、会话恢复。
• HTTP 优化：使用 HTTP/2 或 HTTP/3（多路复用、头部压缩、服务器推送等）、开启持久连接、利用缓存（强缓存、协商缓存）。
• 渲染优化：将 CSS 放在头部、将 JavaScript 放在底部或使用 async/defer、避免同步布局、减少重排和重绘、使用 transform和 opacity属性触发 GPU 加速合成。