面试官: 输入url到展示的完整过程

最新推荐文章于 2025-05-19 11:01:57 发布

@大迁世界

最新推荐文章于 2025-05-19 11:01:57 发布

阅读量866

点赞数 13

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq449245884/article/details/146193218

当我们在浏览器地址栏输入一个 URL 并按下回车，页面加载的过程中会涉及多个关键步骤，包括 DNS 解析、TCP 连接、HTTP 请求、服务器处理、浏览器渲染 等。下面是详细的执行流程：

🔹 1. 用户输入 URL

用户在浏览器地址栏输入一个 URL，例如：

https://www.example.com

如果 URL 没有协议（如 http:// 或 https://），浏览器会默认补充 http:// 或 https://。
如果只输入关键字（如 example），浏览器会使用默认搜索引擎查询。
如果之前访问过，浏览器可能直接从缓存加载（强缓存 / 协商缓存）。

🔹 2. 浏览器进行 DNS 解析

目标：找到 www.example.com 对应的 IP 地址

浏览器首先检查是否已有缓存：

浏览器缓存（DNS 解析缓存）
操作系统缓存（/etc/hosts 或 C:\Windows\System32\drivers\etc\hosts）
路由器缓存（路由器可能有 DNS 解析缓存）
ISP DNS 服务器（向本地 ISP 运营商的 DNS 服务器查询）
根 DNS 服务器 → 顶级域名服务器（TLD） → 权威 DNS 服务器，最终获取 IP 地址。

最终，www.example.com 被解析为 IP 地址，例如：

93.184.216.34

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

目标：客户端与服务器建立可靠的 TCP 连接

浏览器通过 TCP 三次握手 与服务器建立连接：

客户端发送 SYN（请求建立连接）
服务器返回 SYN-ACK（确认连接请求）
客户端返回 ACK（连接建立）

如果是 HTTPS，还需要进行 TLS/SSL 握手：

服务器提供 SSL 证书，客户端验证证书有效性（防止中间人攻击）。
双方协商加密算法，交换密钥，确保数据安全。

🔹 4. 发送 HTTP 请求

目标：浏览器请求服务器上的页面资源

浏览器向服务器发送 HTTP 请求，例如：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive

关键部分：

GET：请求方法（也可能是 POST、PUT、DELETE）。
Host: www.example.com：服务器主机名（虚拟主机）。
User-Agent：浏览器信息。
Accept：告诉服务器客户端希望接收的资源类型。
Connection: keep-alive：保持 TCP 连接，避免重复建立连接。

🔹 5. 服务器处理请求

目标：服务器解析请求，并返回对应的 HTML 页面

服务器收到请求后，执行以下操作：

查找缓存（CDN / 服务器缓存 / 代理缓存）。
请求静态资源（如果请求的是 HTML、CSS、JS、图片）。
执行动态代码（如 PHP、Node.js、Python 生成 HTML）。
访问数据库（如 MySQL、MongoDB）查询数据并返回页面。
生成 HTTP 响应，例如：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Cache-Control: max-age=3600

并返回 HTML 内容。

🔹 6. 浏览器解析 HTML

目标：浏览器解析 HTML 结构，构建页面

浏览器解析 HTML 页面时，执行以下步骤：

解析 HTML，构建 DOM 树
解析 CSS，生成 CSSOM 树
解析 JavaScript

如果 script 不是 async/defer，会 阻塞解析
async：异步加载并立即执行
defer：异步加载，等 HTML 解析完成后执行

合并 DOM 和 CSSOM，构建渲染树

计算布局（Layout）

确定元素的大小、位置

绘制（Painting）

将元素渲染到屏幕

🔹 7. 加载外部资源

目标：加载 CSS、JS、图片等外部资源

CSS：影响页面布局，会阻塞渲染（但不会阻塞 HTML 解析）。
JS：
- 可能修改 DOM（导致重排）。
- async/defer 可优化加载顺序。
图片、视频、字体：
- 通过 Lazy Loading 延迟加载，提高性能。

🔹 8. 浏览器渲染页面

最终，浏览器将渲染完成的页面 绘制到屏幕：

栅格化（分成像素块）。
合成图层（不同层级合成）。
GPU 加速（硬件加速渲染）。

🔹 9. 用户交互 & 浏览器事件

JS 监听用户事件（点击、滚动等）。
浏览器根据用户操作重新渲染页面（如 requestAnimationFrame）。
回流（Reflow）和重绘（Repaint）：
- 回流：布局改变（影响性能）。
- 重绘：颜色、阴影等改变（较轻量）。

🚀 关键优化点

使用 CDN 加速（减少 DNS 解析时间）。
开启 HTTP/2（支持多路复用，减少 TCP 连接）。
开启 Gzip 压缩（减少 HTML/CSS/JS 体积）。
利用缓存（Cache-Control、ETag）。
减少 DOM 操作（避免回流、重绘）。
懒加载 & 代码拆分（按需加载资源）。

💡 总结：输入 URL 到页面展示的完整流程

步骤	过程
1. 输入 URL	用户在浏览器地址栏输入 URL
2. DNS 解析	获取域名对应的 IP 地址
3. TCP 连接	三次握手建立 TCP 连接（HTTPS 需要 TLS 握手）
4. 发送 HTTP 请求	浏览器向服务器请求 HTML 页面
5. 服务器处理请求	服务器查询数据库 / 读取缓存，并返回 HTML
6. 浏览器解析 HTML	解析 DOM、CSSOM、执行 JS，构建渲染树
7. 加载外部资源	加载 CSS、JS、图片等
8. 渲染页面	计算布局，绘制到屏幕
9. 用户交互	监听点击、滚动等事件，并更新 UI