第 9 章 渲染性能优化：管线提速

第 9 章 · 渲染性能优化：管线提速

章节摘要：前八章攒下的管线原理在此收账。每个性能手段都对应管线上一个具体的开销点——首屏体积靠路由分包与异步组件，渲染次数靠缓存与记忆化，列表规模靠虚拟滚动，服务端渲染把首帧工作搬到服务器。本章给出定位工具加优化手段的完整工具箱。

学习目标

阅读完本章，你应当能够：

1. 用开发者工具与 Vue 性能面板定位"网络、脚本、渲染"三类瓶颈；
2. 说出至少六个优化手段各自作用的管线环节；
3. 实现虚拟列表并解释其可行前提；
4. 判断何时需要服务端渲染及其引入的复杂度代价。

核心概念速览

优化前先测量。没有 profile 数据的优化是猜谜，猜错的"优化"经常让代码更丑还更慢。

子章节导航

9.1 性能优化：定位与手段

三大瓶颈的定位方法与对应优化手段清单，含度量回归意识。

9.2 服务端渲染：首屏的终极手段

SSR 的原理、收益边界、水合成本，以及静态生成与客户端渲染的选型谱系。

子章节之间的逻辑关系

9.1 的手段都发生在浏览器内，9.2 把首屏工作搬到服务器——是同一问题（首帧太慢）在管线外的解法，复杂度也最高，放最后讲。

定位瓶颈（9.1）
  ├─ 加载类 → 分包/懒加载/预取
  ├─ 渲染类 → 缓存/边界/虚拟列表
  └─ 首帧无解时 → SSR 或静态生成（9.2）
​

前置知识与后续延伸

• 前置：第 2 章更新队列、第 4 章 diff 与跳过优化、第 5 章异步组件；
• 为后续铺路：第 10 章 Vue 3 的编译期优化（补丁标志、静态提升）是本章手段在框架层的自动版。

提醒一个心理陷阱：性能优化容易变成简历驱动开发——为了用上虚拟列表、上 SSR 而优化，而不是为了指标。本章所有手段出场前都应先有一张"瓶颈在哪"的证据截图。另外，优化与可读性常互斥（缓存、记忆化都增加代码复杂度），只在测出来的热点上付出这种代价，冷代码保持朴素，是长期维护成本最低的策略。