1. 输入网址与 DNS 解析
- 用户在浏览器输入网址，如 www.baidu.com。
- 浏览器检查本地缓存（浏览器缓存、系统缓存、路由器缓存等）是否有这个域名对应的 IP 地址。
- 若没有，则发起 DNS 请求，找到域名对应的 IP（如 14.215.177.39）——这是百度的服务器地址。
2. 建立 TCP 连接（三次握手）
- 浏览器使用这个 IP 地址向服务器发起 TCP 连接。
- 这是通过三次握手完成的，用于建立可靠连接：
客户端 --> SYN --> 服务器
服务器 --> SYN+ACK --> 客户端
客户端 --> ACK --> 服务器
3. 发起 HTTP 请求
TCP 连接建立后，浏览器向服务器发送一个 HTTP 请求报文，比如：
GET / HTTP/1.1
Host: www.baidu.com
User-Agent: ...
Accept: ...
4. 服务器响应（HTML 源码）
- 百度服务器收到请求后，返回一个 HTTP 响应报文，内容通常是 HTML 页面源码：
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: xxxx
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
- 这个源码并不一定包含“页面上所有可见的数据”。
5. 浏览器解析 HTML
浏览器开始 逐行解析 HTML 源码，过程中执行：
📌 构建 DOM 树（Document Object Model）
HTML 标签被解析为结构化节点树。
📌 构建 CSSOM 树（CSS Object Model）
CSS 样式被解析，生成样式树。
📌 合并成渲染树（Render Tree）
DOM + CSSOM → Render Tree，用于计算页面布局。
📌 执行 JavaScript
- 若页面内含有 JS 脚本（例如 React/Vue 应用），会暂停解析 HTML，加载并执行脚本。
- JS 代码可能会发起额外的网络请求（AJAX / Fetch）加载更多数据。
6. 页面渲染流程
浏览器完成以下渲染过程：
- **Layout（回流）：**计算每个元素的几何信息（位置、大小）。
- **Painting（绘制）：**将像素绘制到屏幕上。
- **Compositing（合成）：**生成最终的页面视图。
7. 两种渲染方式的对比
| 渲染方式 | 说明 | 优点 | 缺点 |
|---|---|---|---|
| SSR（服务器渲染） | 数据直接写入 HTML 返回 | 首屏快，利于 SEO | 每次请求都要生成完整页面，服务端压力大 |
| CSR（客户端渲染） | 返回空壳 HTML + JS，JS 请求数据再渲染 | 服务端压力小，交互灵活 | 首屏慢，不利于 SEO |
