在浏览器地址栏输入域名按下回车到页面渲染经历了些什么

详细版

在浏览器地址栏输入域名按下回车，整体流程分为： DNS 解析 → TCP 三次握手 → HTTP/HTTPS 请求发送 → 服务器处理并返回响应 → 浏览器渲染页面 → TCP 四次挥手断开连接。

1. DNS 域名解析

浏览器先查自身缓存、系统 hosts 文件、本地 DNS 缓存；没有则向本地 DNS 服务器递归查询，最终拿到域名对应的 IP 地址。

1.浏览器的 dns 缓存

大家一直在说浏览器的 dns 缓存，缓存，到底在哪里可以看到呢? 可以在浏览器中输入：edge://net-internals/#dns 就可以看到

HTTPS 场景：解析拿到 IP 后，先进行 TLS 握手，协商加密套件、交换密钥，建立加密通道。

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

浏览器（客户端）和服务器通过 TCP 三次握手建立可靠连接：

• 第一次：客户端发 SYN 包
• 第二次：服务端回 SYN+ACK 包
• 第三次：客户端回 ACK 包，连接建立

3. 发送 HTTP 请求

浏览器组装 HTTP 请求报文（请求行、请求头、请求体），通过建好的 TCP 通道发给服务端。

4. 服务端处理请求，返回响应

服务端（Nginx 反向代理 / 后端服务）接收请求，路由匹配、业务逻辑处理，组装 HTTP 响应报文（状态码、响应头、响应体）返回给浏览器。

5. 浏览器接收响应，渲染页面

• 解析 HTML 生成 DOM 树
• 解析 CSS 生成 CSSOM 树
• DOM+CSSOM 合成渲染树
• 布局（Layout）、绘制（Paint）、合成（Composite），页面展示；
• 遇到图片、JS、css 等外部资源，会发起并行的资源请求。

6. 断开 TCP 连接（四次挥手）

数据传输完成后，双方通过四次挥手释放 TCP 连接：

• 客户端发 FIN
• 服务端 ACK 确认
• 服务端数据发完，发 FIN
• 客户端 ACK 确认，连接关闭

进阶版

1. DNS 查询分递归查询（本地 DNS 向根查）、迭代查询；根 DNS → 顶级域 DNS → 权威 DNS。
2. HTTPS = TCP + TLS；TLS 握手会验证证书合法性（CA），防止中间人劫持。
3. 中间可能存在：CDN、反向代理 Nginx、负载均衡；不一定直接打到源站。
4. JS 会阻塞 DOM 解析，defer/async 的区别；重排重绘优化。
5. HTTP/2、HTTP/3（QUIC，基于 UDP，无握手延迟）的优化点。
6. 缓存策略：强缓存 Cache-Control、协商缓存 If-Modified-Since / ETag。

精简版

输入域名回车之后：首先做 DNS 解析，一步步查到服务器 IP；如果是 HTTPS，接着做 TLS 握手建立加密通道；然后 TCP 三次握手建立可靠连接；浏览器发送 HTTP 请求；服务器处理请求返回响应；浏览器拿到响应后解析 HTML、CSS 构建 DOM 树和 CSSOM 树，生成渲染树，经过布局绘制合成把页面渲染出来，同时请求页面里的静态资源；传输完毕后 TCP 四次挥手断开连接。