Skip to content

文日小栈

从输入 URL 到页面展示到底发生了什么

从输入 URL 到页面展示到底发生了什么

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

URL 解析：浏览器解析输入的 URL。
DNS 解析：将域名转为 IP 地址。
建立连接：通过 TCP 三次握手与服务器连接。
发送请求：浏览器发送 HTTP/HTTPS 请求。
服务器处理：后端处理请求并返回响应。
浏览器渲染：解析 HTML、加载资源、绘制页面。

核心点

涉及网络通信和浏览器渲染两大阶段。

1. 详细过程分解

(1) URL 解析

做什么：
浏览器分析 URL 结构，提取协议、域名、路径等。
示例：
输入：https://www.example.com/path
解析：
- 协议：https
- 域名：www.example.com
- 路径：/path
处理：
补全协议（如默认 http）。
检查缓存（输入历史、预加载）。

(2) DNS 解析

做什么：
将域名转换为服务器 IP 地址。
过程：
检查浏览器缓存。
检查本地 hosts 文件。
请求本地 DNS 服务器。
递归查询根域名服务器（.com → example.com）。
结果：
返回 IP（如 93.184.216.34）。
优化：
DNS 预解析（<link rel="dns-prefetch">）。

(3) 建立连接

TCP 连接：
三次握手：
1. 客户端发送 SYN。
2. 服务器回复 SYN+ACK。
3. 客户端发送 ACK。
建立可靠连接。
HTTPS：
TLS 握手：
1. 协商加密算法。
2. 交换证书和密钥。
3. 验证服务器身份。
时间：
TCP + TLS 约 1-2 个 RTT（往返时间）。

(4) 发送请求

做什么：
浏览器构造并发送 HTTP 请求。
请求格式：

GET /path HTTP/1.1
Host: www.example.com
User-Agent: Chrome/89

类型：
GET、POST 等。
优化：
HTTP/2 多路复用，减少请求阻塞。

(5) 服务器处理

做什么：
Web 服务器（如 Nginx）接收请求，交给应用处理。
过程：
路由到后端（如 Spring）。
查询数据库或缓存。
生成响应（HTML、JSON）。
响应格式：

HTTP/1.1 200 OK
Content-Type: text/html
<body>Hello World</body>

状态码：
200：成功。
404：未找到。

(6) 浏览器渲染

步骤：
解析 HTML：
- 构建 DOM 树。
解析 CSS：
- 构建 CSSOM 树。
合并渲染树：
- DOM + CSSOM → Render Tree。
布局（Layout）：
- 计算元素位置和大小。
绘制（Paint）：
- 渲染像素。
合成（Composite）：
- 分层绘制到屏幕。
资源加载：
下载 CSS、JS、图片（并行请求）。
JS 执行可能阻塞（<script defer> 优化）。
示例：

<html>
  <head><link rel="stylesheet" href="style.css"></head>
  <body><div>Hello</div></body>
</html>

2. 关键流程图

输入 URL --> DNS 解析 --> TCP/TLS 连接 --> HTTP 请求
          --> 服务器响应 --> 浏览器解析 --> 页面渲染

3. 优化与细节

缓存：
浏览器缓存（304 Not Modified）。
CDN 加速静态资源。
性能：
预加载（<link rel="preload">）。
懒加载图片。
异常：
DNS 失败：域名不存在。
连接超时：服务器不可达。

4. 延伸与面试角度

与前端：
渲染阻塞：CSS 在 <head>，JS 用 async。
与后端：
服务端渲染（SSR）加速首屏。
实际应用：
电商：DNS + CDN 提速。
面试点：
问“过程”时，提六步。
问“优化”时，提缓存和 HTTP/2。

总结

从输入 URL 到页面展示，涉及 URL 解析、DNS、连接、请求、响应和渲染六大步骤，网络和浏览器协同完成。面试时，可提 TCP 握手或画渲染流程，展示理解深度。