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

当我们在浏览器地址栏输入一个 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

a.如果 script 不是 async/defer，会 阻塞解析

b.async：异步加载并立即执行

c.defer：异步加载，等 HTML 解析完成后执行

• 合并 DOM 和 CSSOM，构建渲染树
• 计算布局（Layout）

a.确定元素的大小、位置

• 绘制（Painting）

a.将元素渲染到屏幕

7. 加载外部资源

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

• CSS：影响页面布局，会阻塞渲染（但不会阻塞 HTML 解析）。
• JS：

a.可能修改 DOM（导致重排）。

b.async/defer 可优化加载顺序。

• 图片、视频、字体：
• 通过 Lazy Loading 延迟加载，提高性能。

8. 浏览器渲染页面

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

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

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

• JS 监听用户事件（点击、滚动等）。
• 浏览器根据用户操作重新渲染页面（如 requestAnimationFrame）。
• 回流（Reflow）和重绘（Repaint）：

a.回流：布局改变（影响性能）。

b.重绘：颜色、阴影等改变（较轻量）。

关键优化点

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

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

面试官可能的追问

✅ 面试官：DNS 解析过程中有哪些优化手段？
回答：

• 使用 DNS 预解析（<link rel="dns-prefetch" href="//example.com">）。
• 使用 CDN，让用户访问最近的服务器。
• 配置 本地 hosts 文件，减少 DNS 查询时间。

✅ 面试官：如何优化浏览器渲染性能？
回答：

• 减少回流（Reflow）：避免频繁修改 DOM 结构。
• 使用 requestAnimationFrame：优化动画流畅度。
• 使用 will-change：让 GPU 预渲染关键元素。

✅ 面试官：为什么 JS 可能会阻塞页面渲染？
回答：

• JS 可能修改 DOM，浏览器必须先执行 JS，再继续解析 HTML。
• 解决方案：使用 async/defer，或将 JS 放在 body 末尾。

总结

输入 URL 到页面展示的过程涉及 DNS 解析、TCP 连接、HTTP 请求、服务器处理、浏览器解析和渲染等多个步骤。通过优化缓存、CDN、HTTP/2 和浏览器渲染策略，可以极大提高页面加载速度！🚀