一个页面首字符响应要 5 秒，如何把它优化到 200ms 以内？给出全链路优化思路。
把「5s -> 200ms」拆成三段瓶颈，逐段优化：
1. 网络层（TTFB 太大）
- 服务端：接口加缓存（Redis）、数据库加索引、预计算/预渲染热点数据。
- CDN：静态资源与可缓存接口走 CDN，就近返回。
- 协议：开启 HTTP/2、TLS 复用、开启 Brotli/Gzip 压缩。
- 边缘计算：把首屏接口放到 Edge Function（Vercel/Cloudflare Workers），缩短物理距离。
2. 渲染层（HTML/CSS/JS 阻塞）
- 关键 CSS 内联、非关键 CSS 异步加载，避免
@import阻塞。 - JS 瘦身：代码分割（Route-level）、Tree Shaking、移除未用依赖。
- 延迟加载：非首屏 JS 用
defer，图片用loading="lazy"+ 占位。 - SSR / 流式渲染：服务端先吐出首屏 HTML，TTFB 即可见文字（React 18
renderToPipeableStream、VuerenderToStream）。
3. 数据层（前端等接口）
- 流式输出：大模型/长列表用 SSE 边生成边渲染，首字符很快出现。
- 预取：路由 hover/visible 时预加载下一页资源（
prefetch）。 - 并行请求：用
Promise.all并发，别串行await。 - 骨架屏 / 占位：先出结构，秒开体感。
监控闭环
- 用 LCP、FCP、TTFB 指标量化，定位是哪一段超标，再针对性优化——不要盲猜。
经验：首字节慢先查后端/CDN，渲染慢查 CSS/JS 阻塞，白屏久查 SSR/流式。