在日常生活中，我们使用浏览器访问众多的网站。你是否想过，当我们在浏览器地址栏输入一个 URL，按下回车，看到页面内容的展示，整个过程究竟发生了什么？本文将向您解释从输入 URL 到呈现页面，背后所发生的技术细节。
1. 用户输入 URL
当您在浏览器中输入一个 URL，并按回车键时，这个 URL 就会成为浏览器试图访问的目标。
2. 域名解析（DNS 查询）
域名解析的主要目标是根据提供的域名找到其对应的 IP 地址。浏览器会检查其 DNS 缓存，如果未找到相应的 IP 地址，那么它将会向 DNS 服务器发起一个 DNS 查询请求。DNS 服务器会从根域名服务器一直查询到最低级域名服务器，最终返回对应的 IP 地址。
3. 建立 TCP 连接
在获取目标服务器的 IP 地址后，浏览器会与服务器建立一个 TCP 连接，开始进行三次握手。
- 第一次握手：客户端发送一个 SYN（同步序列编号）报文到服务器。
- 第二次握手：服务器确认收到 SYN，然后发送一个 SYN+ACK 报文。
- 第三次握手：客户端收到 SYN+ACK 后，发送一个 ACK 报文作为响应。
以上三次握手后，客户端和服务器之间建立了稳定的 TCP 连接。
4. 发送 HTTP 请求
完成 TCP 连接建立后，浏览器将通过该连接发送一个 HTTP 请求。HTTP 请求主要包括请求行、请求头和请求体三部分。
- 请求行：包含 HTTP 方法（例如 GET、POST）、请求的 URI 和协议版本。
- 请求头：包含关于客户端和请求的元信息，包括主机名、用户代理、接受的语言和编码等。
- 请求体：当使用某些 HTTP 方法（例如 POST）时，用于传输数据。
5. 服务器处理请求
服务器接收到 HTTP 请求后，会根据请求参数对资源进行操作（例如查询、创建、修改或删除）。以下是一些可能的操作：
- 静态资源：服务器直接返回 HTML、CSS、JavaScript、图像等静态资源。
- 动态资源：服务器会处理动态内容，这可能涉及到查询数据库、执行后端代码等。
6. 服务器返回响应
服务器完成资源处理后会返回一个 HTTP 响应，包括响应行、响应头和响应体。
- 响应行：包含 HTTP 协议版本、状态码和描述信息。
- 响应头：包含服务器和响应的元信息，例如内容类型、内容长度、服务端信息等。
- 响应体：所请求的实际数据（例如 HTML 文档）。
7. 浏览器解析和渲染 HTML 文档
浏览器接收到 HTML 文档后，首先对其进行解析。解析的过程中，浏览器会：
- 构建 DOM 树：将 HTML 文档解析成 DOM 节点。
- 构建 CSSOM 树：将 CSS 解析成 CSSOM 节点。
- 合并 DOM 树和 CSSOM 树，形成渲染树（Render Tree）。
- 执行 JS 代码，可能会操作 DOM 树和 CSSOM 树。
- 计算每个节点的布局信息（如位置、大小等）。
- 绘制：将渲染树中的所有节点在屏幕上绘制出来。
在这个过程中，浏览器会加载外部资源，例如图片、字体、JavaScript 和 CSS 文件。加载这些资源可能会涉及到额外的 DNS 查询或 TCP 连接。
8. 异步加载资源和异步操作
在浏览器解析和渲染 HTML 文档的过程中，可能会遇到需要异步加载的资源，如 JavaScript 文件中的 AJAX 请求或使用 async 和 defer 属性的脚本。这些资源和操作会在恰当的时机执行，不会阻塞浏览器的解析和渲染。
某些情况下，劣质的 JavaScript 代码可能导致布局抖动、资源阻塞或无法按预期执行。开发者需要确保使用高质量的代码，并遵循最佳实践，以获得良好的用户体验。
9. 关闭 TCP 连接
在浏览器获取所有所需资源并呈现完整页面之后，在合适的时机会关闭到服务器的 TCP 连接。这是通过四次挥手完成的：
- 第一次挥手：客户端发送一个 FIN（结束）报文到服务器。
- 第二次挥手：服务器确认收到 FIN，发送一个 ACK 报文作为响应。
- 第三次挥手：服务器发送一个 FIN 报文到客户端。
- 第四次挥手：客户端发送一个 ACK 报文，确认收到服务器的 FIN。
完成四次挥手后，TCP 连接便被关闭。
在整个页面访问过程中，浏览器可能会使用预加载、缓存、隐身模式等技术来提高性能、安全性或更好地保护用户隐私。
总结
从输入 URL 到页面展示，这个过程涉及到了多个阶段，包括域名解析、建立 TCP 连接、发送请求、接收响应、解析和渲染页面以及关闭连接。为了提升网页加载速度和用户体验，开发者需要易于理解和优化各环节。例如，减少请求次数、对资源进行压缩、使用缓存策略、优化 JS 代码、浏览器兼容性等。通过掌握这个过程，我们可以更好地理解和改进 Web 页面的加载性能以及用户体验。
