浏览器如何渲染网页——以及 React、CSR 与 SSR 的定位

Source: Dev.to

浏览器处理请求的过程

DNS 查询

浏览器首先检查自己的缓存。如果资源未被缓存，它会查询 域名系统 (Domain Name System) 来将域名解析为 IP 地址。

example.com → 93.184.216.34

TCP / TLS 握手

与服务器建立 TCP 连接。如果站点使用 HTTPS，则会进行 TLS 握手以建立安全通道。

HTTP 请求

浏览器发送 HTTP 请求，例如：

GET /index.html HTTP/1.1
Host: example.com

服务器响应

服务器会流式返回所需的资源（HTML、CSS、JavaScript、图片、字体等）。由于这些资源通常以块的形式发送，浏览器可以在整个负载下载完成之前就开始处理它们。

UI 如何渲染

解析 HTML → DOM

一旦 HTML 字节到达，解析器就会构建 文档对象模型 (DOM) 树。

## 产品

Item 1

Resulting structure:

body
 ├── h1
 └── p

解析 CSS → CSSOM

当遇到 或 标签时，浏览器会创建一个 CSS Object Model (CSSOM)，将选择器映射到样式规则。

p {
  color: blue;
}

渲染树 (DOM + CSSOM)

DOM 和 CSSOM 合并为一个 render tree，其中仅包含将被绘制的节点（像 “ 这样的元素或 display:none 的元素会被省略）。

布局（回流）

浏览器计算每个可见元素的几何属性——宽度、高度以及 X/Y 位置——以使 UI 适配视口。

绘制

可视细节（颜色、边框、文字、阴影、图像）被光栅化到图层上。某些元素（粘性标题、弹出层、变换元素、动画）会放在独立图层上，以实现 GPU 加速的合成。

合成

各图层被合成为最终的位图，显示在屏幕上。

JavaScript 执行与阻塞

当遇到 “ 标签时，HTML 解析会暂停：

浏览器下载脚本并执行，然后恢复解析。这就是脚本会阻塞渲染的原因。为减轻阻塞：

React、CSR 与 SSR 的定位

客户端渲染 (CSR)

服务器返回一个最小的 HTML 框架和一个 JavaScript 包。浏览器最初显示一个空白页面；随后 React 在客户端构建 UI。

// main.js
ReactDOM.createRoot(document.getElementById('root')).render();

典型流程：

1. 空白屏幕 →
2. 加载 JavaScript →
3. UI 出现（React 动态创建 DOM 节点）。

服务端渲染 (SSR)

服务器预渲染 React 组件为完整的 HTML，使浏览器能够立即显示有意义的内容。

## 产品

Item 1

After the HTML is painted, the JavaScript bundle hydrates the page—attaching event listeners and making the UI interactive.

• Before hydration: button visible but not clickable.
• After hydration: button becomes interactive.

Comparison

## 要点

- 了解浏览器的渲染管线可以帮助您**优化性能**并**避免阻塞渲染**的陷阱。  
- 在客户端逻辑占主导的高度交互式单页应用中，选择**CSR**。  
- 若需要更快的首次加载和更好的 SEO，请选择**SSR**（或类似 Next.js 的混合方案）。  
- 现代框架常常将两者结合，在快速首次渲染后通过水合实现客户端交互。