浏览器输入 URL 回车后发生了什么（Facebook）

一、总体流程

URL 解析 -> DNS 解析 -> TCP 连接 -> TLS 握手 -> 发 HTTP 请求
-> 服务器处理 -> 返回响应 -> 浏览器渲染 -> 断开连接

二、逐步展开

1. URL 解析

判断是搜索还是 URL。补全协议、端口。

2. DNS 解析

见 DNS 解析全过程，把域名换成 IP。

3. 建立 TCP 连接

三次握手：

客户端 -> 服务器: SYN
服务器 -> 客户端: SYN + ACK
客户端 -> 服务器: ACK

4. TLS 握手（HTTPS）

见 HTTPS 原理，协商密钥、验证证书。

5. 发 HTTP 请求

请求行、请求头、请求体：

GET /index.html HTTP/1.1
Host: www.example.com
Cookie: ...
Accept: text/html

6. 服务器处理

• 负载均衡转发。
• 应用服务器（Nginx -> Tomcat）处理。
• 查 DB、Redis。
• 返回 HTTP 响应。

7. 浏览器收到响应

• 解析状态码（200 / 301 / 404）。
• 检查缓存。
• 根据 Content-Type 处理。

8. 解析渲染

1. 解析 HTML 成 DOM 树。
2. 解析 CSS 成 CSSOM。
3. 合成渲染树（Render Tree）。
4. 布局（Layout / Reflow）：计算元素位置。
5. 绘制（Paint）：像素化。
6. 合成（Composite）：GPU 合成图层。

9. 加载子资源

HTML 解析过程中遇到 CSS、JS、图片，并发请求：

• CSS 阻塞渲染。
• JS 阻塞 DOM 解析（除非 async / defer）。
• 图片异步加载。

10. 连接断开

• Keep-Alive 长连接复用。
• 四次挥手断开。

三、性能优化点

• DNS 预解析：<link rel="dns-prefetch">。
• 减少重定向。
• CDN 加速静态资源。
• 压缩、HTTP/2。
• 关键 CSS 内联，JS 异步。

面试答题框架

按：解析 URL → DNS → TCP → TLS → HTTP 请求 → 服务器处理 → 响应 → 渲染 → 子资源加载，不要漏关键节点。