文章中英模式

布鲁斯前端面试题目 - 从输入网址到页面显示的过程

深入解析从浏览器输入URL到页面完全加载的完整过程，包含DNS查询、TCP连接、HTTP请求、渲染过程等环节，掌握前端面试中的网络与浏览器核心知识。

文章中英模式

懒得看文章？那就来看视频吧

从输入网址到页面显示的完整流程概述

当你在浏览器地址栏输入一个URL并按下Enter后，会经过以下主要阶段:

1. URL解析
2. DNS解析（域名 → IP地址）
3. 建立TCP连接
4. 发送HTTP请求
5. 服务器处理请求并返回HTTP响应
6. 浏览器解析HTML并请求其他资源
7. 浏览器渲染页面
8. 关闭连接

  ┌──────────────────────────────────────────────────┐
  │                                                  │
  │  1️⃣ URL解析                                      │
  │  https://example.com/page                       │
  │                                                 │
  │  2️⃣ DNS解析                                      │
  │  example.com ──> IP (93.184.216.34)            │
  │                                                 │
  │  3️⃣ TCP连接                                      │
  │  客户端 ⇄ 服务器 (三次握手)                       │
  │                                                 │
  │  4️⃣ HTTP请求                                     │
  │  GET /page HTTP/1.1 ──>                        │
  │                                                 │
  │  5️⃣ 服务器响应                                    │
  │  <── 200 OK + HTML内容                          │
  │                                                 │
  │  6️⃣ 请求其他资源                                  │
  │  获取 CSS/JS/图片                                │
  │                                                 │
  │  7️⃣ 渲染页面                                     │
  │  DOM ──> CSSOM ──> 渲染 ──> 布局 ──> 绘制        │
  │                                                 │
  │  8️⃣ 关闭连接                                     │
  │                                                 │
  └──────────────────────────────────────────────────┘

接下来我们会详细解释每个阶段发生的事情。

第一阶段: URL解析

浏览器首先解析URL的各个部分:

https://www.example.com:443/path/to/page?query=string#fragment
|-----||--------------||---||------------||-----------||----|
 协议     主机(域名)    端口    路径          查询参数    片段

1. 协议(Protocol): http, https, ftp等
2. 主机(Host): 域名或IP地址
3. 端口(Port): 特定服务的通信端口（如HTTP默认80，HTTPS默认443）
4. 路径(Path): 服务器上资源的路径
5. 查询参数(Query string): 向服务器传递的参数
6. 片段(Fragment): 页面内的锚点，仅浏览器使用不发送给服务器

第二阶段: DNS解析过程

DNS将网址(如www.example.com)转换为电脑能理解的IP地址(如192.168.1.1)。

DNS查询的顺序:

1. 浏览器缓存: 先看浏览器是否记住这个网址
2. 电脑缓存: 再看电脑是否记住
3. 路由器缓存: 再问家里的路由器
4. 网络供应商: 最后问网络供应商(ISP)
5. DNS服务器查询: 如果都没有，就向网络上的DNS服务器一层层查询

DNS解析需要时间，这就是为什么网站会使用CDN来加速这个过程。

第三阶段: 建立连接

找到IP地址后，浏览器需要与服务器建立连接:

TCP三次握手:

1. 第一次握手: 浏览器说「嗨，我想连接」
2. 第二次握手: 服务器回应「好的，我收到了，可以连接」
3. 第三次握手: 浏览器说「太好了，我们开始通讯吧」

HTTPS的安全握手:

如果是HTTPS网站，在TCP连接后还会进行安全握手:

1. 打招呼: 浏览器说「我能用这些加密方式」
2. 确认方式: 服务器选一种加密方式回应
3. 身份确认: 服务器出示「身份证」(数字证书)
4. 交换密钥: 双方协商出一把「密钥」
5. 开始加密: 之后的通讯都用这把密钥加密

这就像你和银行通话前，先确认对方真的是银行，然后用只有你们知道的暗号交谈，防止别人偷听。这也是为什么HTTPS比HTTP多花一点时间，但更安全。

第四阶段: 发送HTTP请求

TCP连接建立后，浏览器构造HTTP请求发送到服务器:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
Accept: text/html,application/xhtml+xml,...
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Cookie: user_session=abc123; visit_count=5

HTTP请求包含:

1. 请求行: 包含HTTP方法(GET, POST等)、请求路径和HTTP版本
2. 请求头: 包含各种元数据如User-Agent, Accept等
3. 请求体: GET通常无请求体，POST包含表单数据等
4. Connection: keep-alive: 告诉服务器保持TCP连接开启，让多个HTTP请求共用同一连接。HTTP/1.1预设启用，无需配置。这减少了建立新连接的开销，加快页面加载速度。

第五阶段: 服务器处理请求并返回响应

服务器接收请求后:

1. 服务器解析HTTP请求
2. 执行必要的处理(查询数据库、处理业务逻辑等)
3. 组装HTTP响应并返回

HTTP/1.1 200 OK
Date: Mon, 23 May 2023 22:38:34 GMT
Server: Apache/2.4.52 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 138
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
<head>
  <title>Example Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <!-- 页面内容 -->
</body>
</html>

HTTP响应包含:

1. 状态行: HTTP版本、状态码和状态信息
2. 响应头: 包含各种元数据
3. 响应体: 包含实际的HTML内容或其他资源

第六阶段: 浏览器解析HTML并请求其他资源（CRP路径）

浏览器收到HTML后:

1. 解析HTML，构建DOM树
2. 遇到外部资源(CSS, JavaScript, 图片等)时发起新的HTTP请求
3. 解析CSS，构建CSSOM树
4. 执行JavaScript代码，可能会修改DOM和CSSOM

在这个过程中，浏览器可能会并行发起多个请求，但受到HTTP协议版本和浏览器限制:

1. HTTP/1.1: 每个域名有6-8个并行连接限制
2. HTTP/2: 单个连接可处理多个请求，大幅提高性能

第七阶段: 浏览器渲染页面（CRP路径）

所有必要资源加载后，浏览器进行渲染过程:

1. 计算样式: 结合DOM和CSSOM，确定每个节点的最终样式
2. 布局(Layout/Reflow): 计算每个元素在屏幕上的位置和大小
3. 绘制(Paint): 填充像素，绘制文字、颜色、图像等
4. 合成(Compositing): 将不同层合成到一起

这个过程非常复杂，现代浏览器会进行各种优化:

1. 增量渲染: 不等所有资源加载完就开始渲染
2. 分层渲染: 将页面分成多个层进行独立处理
3. 硬件加速: 使用GPU加速某些渲染操作

第八阶段: 关闭连接

页面完全加载后，如果HTTP头中指定了"Connection: close"，TCP连接会关闭，通过四次挥手过程:

如果使用HTTP/1.1的Keep-Alive机制或HTTP/2，连接可能保持打开状态以便复用，提高性能。

🔥 常见面试题目

(一) 简述从地址栏输入URL到页面显示的完整过程?

解答：完整过程包含以下关键步骤：

  +-------------+    +-------------+    +-------------+    +-------------+
  |   网络阶段  | -> |   响应阶段  | -> |   解析阶段  | -> |   渲染阶段  |
  +-------------+    +-------------+    +-------------+    +-------------+
  | 1. URL解析  |    | 1. 处理请求 |    | 1. 构建DOM  |    | 1. 样式计算 |
  | 2. DNS查询  |    | 2. 返回响应 |    | 2. 构建CSSOM|    | 2. 布局     |
  | 3. TCP连接  |    | 3. 接收数据 |    | 3. 执行JS   |    | 3. 绘制     |
  | 4. HTTP请求 |    |             |    |             |    | 4. 合成     |
  +-------------+    +-------------+    +-------------+    +-------------+

  流程顺序：
  输入URL ➜ URL解析 ➜ DNS查询 ➜ TCP连接 ➜ (HTTPS则加SSL/TLS) ➜ HTTP请求 ➜
  服务器处理 ➜ 返回响应 ➜ 解析HTML/CSS/JS ➜ 渲染页面 ➜ 页面交互

重点是理解这个过程涉及网络通信、服务器处理、浏览器解析与渲染四大阶段，每个阶段都有优化空间。

(二) 浏览器渲染过程中的关键路径是什么?如何优化?

解答：参考前端性能优化题目的解释网页的渲染过程（CRP路径）

(三) HTTPS对比HTTP在这个过程中增加了哪些步骤?

解答：HTTPS在HTTP基础上增加了SSL/TLS握手过程，主要用于建立安全连接：

  客户端                                      服务器
    |                                            |
    |  -------- Client Hello --------------->   |  1. 发送支持的加密套件和随机数
    |                                            |
    |  <------- Server Hello ----------------   |  2. 回应选定套件、随机数和证书
    |                                            |
    |  -------- 验证+预主密钥 ------------->   |  3. 验证证书并发送加密的预主密钥
    |                                            |
    |  <------- 确认加密通信 ---------------   |  4. 双方生成会话密钥并确认
    |                                            |
    |  === 开始加密HTTP通信 ================>   |
    |  <=================================>      |

这个握手过程发生在TCP连接之后、HTTP请求之前，为通信提供加密保护和身份验证，有效防止中间人攻击。