下面用最清晰、最标准的一套流程来说明：当你在浏览器输入 www.xxx.com 并回车后，从输入到页面成功显示，中间发生了什么。

🌐 在浏览器访问 www.xxx.com 的完整流程（超详细）

1️⃣ 输入网址，浏览器开始解析 URL

  • 你在地址栏输入：www.xxx.com
  • 浏览器解析它的结构：协议（默认 http:// 或 https://）、主机名（域名）、路径（默认为 /）。

2️⃣ 浏览器检查缓存（性能优化的第一步）

浏览器会检查：

  • 浏览器缓存（Disk Cache / Memory Cache）
  • DNS 缓存
  • OS 系统缓存
  • 代理服务器缓存（若有）

如果：

  • 有缓存文件 且没过期 → 不请求服务器，直接返回页面。

若无缓存 → 进入下一步。

3️⃣ DNS 解析：把域名转换成 IP 地址

浏览器会依次查找：

  1. 浏览器 DNS 缓存
  2. 操作系统 Hosts 文件
  3. 本机 DNS 缓存
  4. 本地 DNS 服务器（ISP）
  5. 若本地 DNS 找不到，会递归或迭代查询：
    • 根服务器
    • 顶级域名服务器（.com）
    • 权威 DNS 服务器（负责 xxx.com 的 DNS）

最终得到：

www.xxx.com → 93.184.216.34（示例）

4️⃣ 浏览器与服务器建立 TCP 连接（三次握手）

过程：

  1. 浏览器发送 SYN
  2. 服务器返回 SYN + ACK
  3. 浏览器发送 ACK

连接建立成功后，进入下一步。

5️⃣ （如果是 HTTPS）建立 TLS/SSL 加密通道

HTTPS 会多一个步骤：

  • 客户端和服务器进行 TLS 握手
  • 验证服务器证书（SSL 证书）
  • 生成对称加密密钥（会话密钥）

握手完成后，双方的通信被完全加密。

6️⃣ 浏览器发送 HTTP 请求

例如：

GET / HTTP/1.1
Host: www.xxx.com
User-Agent: Chrome/…
Accept: text/html
Connection: keep-alive

如果有 Cookie，也会一起发送。

7️⃣ 服务器处理请求并返回 HTTP 响应

服务器可能包含：

  • Web Server（Nginx、Apache）
  • 应用服务器（Node.js、Java、PHP…）
  • 数据库（MySQL、MongoDB…）

最终返回：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: ...

并带上页面 HTML 内容。

8️⃣ 浏览器开始解析 HTML

浏览器的渲染引擎（如 Blink）开始工作：

解析步骤：

  1. 构建 DOM 树
  2. 构建 CSSOM 树
  3. 合成 Render Tree（渲染树）
  4. 布局 Layout（计算坐标和大小）
  5. 绘制 Paint
  6. 最终呈现页面

9️⃣ 遇到资源文件会继续发起请求

HTML 中若包含：

  • CSS
  • JS
  • 图片
  • 字体
  • 视频音频

浏览器会继续发送多个 HTTP 请求（可能并行）：

GET /style.css
GET /main.js
GET /logo.png

并且重复：

  • 缓存检查
  • DNS（若跨域）
  • TCP/TLS（若未复用）

🔟 JS 执行、DOM 更新，页面变得可交互

浏览器执行 JavaScript：

  • 绑定事件
  • 渲染组件
  • Ajax 请求
  • 更新 DOM

最终页面变得可操作。

✔️ 全流程总结（非常简短版）

  1. 输入网址 → URL 解析
  2. 查缓存（有就返回）
  3. DNS 解析 → 得到 IP
  4. TCP 三次握手
  5. HTTPS → TLS 握手
  6. 发送 HTTP 请求
  7. 服务器处理并返回响应
  8. 浏览器解析 HTML → 构建渲染树
  9. 加载 CSS/JS/图片等资源
  10. 执行 JS、布局、绘制 → 页面显示