CSR 渲染结果
这是通过客户端 JavaScript 渲染的内容
A
客户端组件
JavaScript 在浏览器端执行
B
动态数据
通过 fetch API 获取
C
交互处理
浏览器绑定事件
模拟三种渲染模式在页面加载过程中的不同表现，对比白屏时间、FMP、LCP 等核心指标
这是通过客户端 JavaScript 渲染的内容
这是服务器预先渲染好的 HTML
这是构建时预生成的静态 HTML（CDN 缓存）
| 阶段 | 说明 | 耗时 |
|---|---|---|
| HTML 加载 | 下载空的 HTML 外壳文档 | - |
| JS 下载与解析 | 下载框架代码 + 业务代码并解析 | - |
| 数据获取 | 客户端发起 API 请求获取数据 | - |
| 渲染 | JavaScript 生成 DOM 并挂载到页面 | - |
| 总计 | - |
| 阶段 | 说明 | 耗时 |
|---|---|---|
| 服务端渲染 | 服务器执行组件渲染，等待数据获取 | - |
| HTML 传输 | 传输包含内容的完整 HTML | - |
| JS 下载 | 下载水合所需的 JavaScript | - |
| 水合 | 为已有 DOM 绑定事件处理器 | - |
| 总计 | - |
| 阶段 | 说明 | 耗时 |
|---|---|---|
| 构建 | 构建时预渲染页面（不计入运行时） | - |
| CDN 缓存 | 从 CDN 边缘节点获取缓存的 HTML | - |
| JS 下载 | 下载交互所需的 JavaScript | - |
| 水合 | 为已有 DOM 绑定事件处理器 | - |
| 总计 | - |