在浏览器中输入 URL 地址到显示主页的过程？

八股文_计算机网络面试题 0 293

PS：这是一个很高频的面试题，理论上回答的越详细越好，但是呢，有时候太详细会把自己卡住，所以我觉得主要是要有逻辑+流畅为主，其他细节等面试题提问就行，下面是参考回答：

在浏览器中输入URL地址到显示主页，其中涉及的过程相当复杂，以下是这个过程的简化描述：

参考回答

当你在浏览器中输入一个 URL 并按下回车键，浏览器会经历以下步骤，将网站内容显示在页面上：

DNS 解析：将输入的域名（如 www.example.com）解析为服务器的 IP 地址。
TCP 三次握手：与服务器建立 TCP 连接，确保双方准备好数据传输。
发送 HTTP 请求：浏览器向服务器发送 HTTP 请求（如 GET 请求）以获取页面资源。
服务器处理请求并返回响应：服务器接收到请求后，生成响应数据（如 HTML、CSS、JS 文件）并返回给浏览器。
浏览器解析渲染页面：
- 解析 HTML，构建 DOM 树。
- 下载 CSS 构建 CSSOM 树，并结合 DOM 树生成渲染树。
- 执行 JavaScript，处理动态内容。
- 渲染内容到屏幕。
建立持久连接：浏览器可能使用 HTTP/2 等协议复用连接，加载更多资源（如图片、视频）。

这整个过程通常在几百毫秒内完成。

详细讲解与拓展

1. URL 解析和 DNS 解析

当你输入 URL（如 https://www.example.com）时：
- 解析协议：确定使用 http 或 https。
- 解析域名：提取域名 www.example.com 和路径 /。
DNS 解析：
- 浏览器先检查本地 DNS 缓存，看看是否已记录对应的 IP 地址。
- 如果缓存中没有，浏览器会向 DNS 服务器（通常是 ISP 提供的）发送请求，将域名解析为 IP 地址（如 93.184.216.34）。
- 可能涉及多个查询（递归和迭代）。

2. 建立 TCP 连接（三次握手）

浏览器通过解析到的 IP 地址和端口号（默认 HTTP 为 80，HTTPS 为 443），与服务器建立 TCP 连接。
TCP 连接通过三次握手完成：
1. 浏览器发送 SYN（同步）包，表示请求建立连接。
2. 服务器回复 SYN+ACK（同步确认）包。
3. 浏览器发送 ACK（确认）包，连接建立。

3. HTTPS 加密（可选）

如果使用 HTTPS：
- 浏览器和服务器会通过 TLS/SSL 协议协商加密算法，并交换密钥。
- 建立安全加密的通信通道，确保数据传输的安全性。

4. 发送 HTTP 请求

TCP 连接建立后，浏览器发送 HTTP 请求。典型的 GET 请求格式如下：
```
GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
```
请求内容包括：
- 方法：如 GET、POST。
- 路径：如 /。
- 请求头：如 User-Agent 表示浏览器类型。
- 可选的请求体（POST 请求才有）。

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

服务器接收到请求后：
- 检查请求内容（路径、头部等）。
- 从服务器端的资源（如文件或数据库）中获取数据。
- 生成响应数据（如 HTML 文件），返回给浏览器。
响应内容包括：
- 状态码：如 200 OK（成功）、404 Not Found（资源未找到）。
- 响应头：如 Content-Type: text/html。
- 响应体：即 HTML 文件内容。

6. 浏览器解析响应并渲染页面

浏览器接收到服务器返回的 HTML 文件后，开始解析和渲染页面，具体过程如下：

(1) 解析 HTML，构建 DOM 树

浏览器从响应体中读取 HTML 内容。
逐行解析 HTML，生成 DOM 树（Document Object Model）。

(2) 加载 CSS，构建 CSSOM 树

浏览器解析 <link> 标签和 <style> 标签，下载外部 CSS 文件并解析。
生成 CSSOM 树（CSS Object Model）。

(3) 合成渲染树

将 DOM 树和 CSSOM 树结合，生成 渲染树，用于绘制页面内容。

(4) 执行 JavaScript

浏览器解析并执行 <script> 标签中的 JavaScript 文件。
JavaScript 可能修改 DOM 和 CSSOM，触发页面的重绘（Repaint）或回流（Reflow）。

(5) 布局和绘制

浏览器根据渲染树计算每个元素的布局位置。
绘制页面内容到屏幕。

7. 加载其他资源

HTML 中的图片、视频、字体等资源以独立的请求方式加载。
浏览器可能使用 HTTP/2 或 长连接复用 TCP 连接，提高性能。

8. 缓存机制

在资源加载过程中，浏览器会检查缓存：
- 强缓存：如缓存未过期，直接使用缓存资源。
- 协商缓存：如缓存已过期，与服务器确认资源是否更新，未更新则使用缓存。

实际案例：输入 `www.example.com` 的过程

浏览器解析 URL 并通过 DNS 查询到 93.184.216.34。
浏览器与服务器建立 TCP 连接（三次握手）。
如果是 HTTPS，执行 TLS 加密握手。
浏览器发送 GET / 请求。
服务器返回 HTML 文件，状态码为 200 OK。
浏览器解析 HTML，发现需要加载 CSS 和 JS 文件，继续发送请求。
解析 CSS、执行 JS，生成渲染树并绘制页面。
页面完全加载后，浏览器可能触发其他异步加载（如动态内容）。

总结

从输入 URL 到页面显示的过程包含以下关键步骤：
1. DNS 解析：将域名转为 IP 地址。
2. 建立连接：通过 TCP（三次握手）和 TLS（HTTPS）。
3. 发送请求：浏览器发送 HTTP 请求。
4. 服务器响应：返回 HTML、CSS、JS 等资源。
5. 浏览器渲染：解析 HTML、加载 CSS 和 JS，生成渲染树并绘制页面。
6. 加载资源：动态加载图片、视频等。

整个流程需要优化 DNS、TCP、HTTP、缓存等环节，提升用户体验和性能。