从输入 URL 到页面呈现的完整过程解析 | 前端性能优化指南

从输入 URL 到页面呈现的过程涉及多个步骤，主要包括以下几个阶段：

1. URL 解析

• 输入 URL：用户在浏览器地址栏输入 URL（如 https://www.example.com）。
• 解析 URL：浏览器解析 URL，提取协议（如 https）、主机名（如 www.example.com）、端口（如 443，默认情况下 HTTPS 使用 443 端口）、路径（如 /）和查询参数（如 ?query=value）。

2. DNS 解析

• 查找缓存：浏览器首先检查本地缓存（如浏览器缓存、操作系统缓存、路由器缓存）中是否有对应的 IP 地址。
• DNS 查询：如果缓存中没有找到，浏览器会向 DNS 服务器发起查询请求，获取目标域名的 IP 地址。这个过程可能涉及递归查询和迭代查询。

3. 建立 TCP 连接

• 三次握手：浏览器通过 TCP 协议与服务器建立连接。这个过程包括：
  1. 客户端发送 SYN 包到服务器。
  2. 服务器响应 SYN-ACK 包。
  3. 客户端发送 ACK 包，完成三次握手，建立连接。

4. TLS 握手（HTTPS）

• 协商加密协议：如果使用 HTTPS，客户端和服务器会进行 TLS 握手，协商加密算法和密钥。
• 验证证书：客户端验证服务器的 SSL/TLS 证书，确保证书的有效性和可信性。

5. 发送 HTTP 请求

• 构造请求：浏览器构造 HTTP 请求报文，包括请求行（如 GET / HTTP/1.1）、请求头（如 Host: www.example.com、User-Agent 等）和请求体（如 POST 请求的数据）。
• 发送请求：通过已建立的 TCP 连接，浏览器将 HTTP 请求发送到服务器。

6. 服务器处理请求

• 接收请求：服务器接收到请求后，解析请求报文，确定请求的资源和方法。
• 处理请求：服务器根据请求的资源和方法，执行相应的处理逻辑（如查询数据库、调用 API 等）。
• 生成响应：服务器生成 HTTP 响应报文，包括状态行（如 HTTP/1.1 200 OK）、响应头（如 Content-Type: text/html）和响应体（如 HTML 内容）。

7. 接收 HTTP 响应

• 接收响应：浏览器接收到服务器的 HTTP 响应报文。
• 解析响应：浏览器解析响应报文，提取状态码、响应头和响应体。

8. 渲染页面

• 解析 HTML：浏览器解析 HTML 文档，构建 DOM 树。
• 加载资源：浏览器根据 HTML 中的链接（如 CSS、JavaScript、图片等），发起额外的 HTTP 请求，加载这些资源。
• 构建 CSSOM：浏览器解析 CSS 文件，构建 CSSOM 树。
• 构建渲染树：浏览器将 DOM 树和 CSSOM 树合并，生成渲染树。
• 布局（Layout）：浏览器计算渲染树中每个节点的几何信息（如位置、大小等）。
• 绘制（Paint）：浏览器将渲染树中的节点绘制到屏幕上。

9. 执行 JavaScript

• 解析和执行 JavaScript：浏览器解析并执行 HTML 中的 JavaScript 代码，可能会修改 DOM 或 CSSOM，触发重新布局和绘制。

10. 页面呈现

• 最终呈现：浏览器完成所有资源的加载和渲染后，页面最终呈现给用户。

11. 连接关闭

• 四次挥手：当页面加载完成后，浏览器和服务器可能会关闭 TCP 连接。这个过程包括：
  1. 客户端发送 FIN 包。
  2. 服务器响应 ACK 包。
  3. 服务器发送 FIN 包。
  4. 客户端响应 ACK 包，完成四次挥手，关闭连接。

总结

从输入 URL 到页面呈现的过程涉及多个网络协议（如 DNS、TCP、TLS、HTTP）和浏览器渲染机制。每个步骤都可能影响页面加载的性能和用户体验，因此在前端开发中，优化这些步骤（如减少 DNS 查询、使用 CDN、压缩资源、优化渲染路径等）是提升页面性能的关键。