#type / moc
#status / evergreen
#tech / dev / frontend
[!info] related notes
前端性能优化 MOC
这张地图覆盖什么
前端性能优化不是单点技巧，而是一套系统工程。
核心目标：在用户感知上更快、更稳、更省。
本 MOC 按完整链路分层组织，覆盖从指标定义、网络传输、构建产物、浏览器渲染、框架更新、用户体验到工程化治理的全链路。
从这里开始
- 先理解 前端性能优化分层框架，建立总览认知
- 再看 性能指标体系，明确优化目标
- 按分层逐层深入各原子笔记
核心笔记
一、指标与监控层
| 笔记 | 说明 |
|---|
| [[performance-metrics-system | 性能指标体系]] |
| [[time-to-first-byte-ttfb | 首字节时间 TTFB]] |
| [[performance-monitoring-system | 性能监控体系]] |
| [[performance-budget | 性能预算]] |
二、网络与传输层
| 笔记 | 说明 |
|---|
| [[critical-path-optimization | 关键路径优化]] |
| [[cdn-acceleration | CDN 加速]] |
| [[resource-compression | 资源压缩]] |
| [[browser-cache-types-304-memory-disk | HTTP 缓存策略]] |
| [[service-worker-and-cache-api | Service Worker 与 Cache API]] |
三、构建与资源层
| 笔记 | 说明 |
|---|
| [[code-splitting | 代码分割]] |
| [[tree-shaking | Tree Shaking]] |
| [[web-first-screen-load-optimization | 首屏加载优化]] |
四、渲染与运行时层
| 笔记 | 说明 |
|---|
| [[browser-rendering-process | 浏览器渲染管线]] |
| [[composite-layer-animation | 合成层动画]] |
| [[long-task-optimization | 长任务优化]] |
| [[debounce-and-throttle | 防抖与节流]] |
五、框架与应用架构层
| 笔记 | 说明 |
|---|
| [[csr-ssr-ssg | CSR、SSR 与 SSG]] |
| [[virtual-list | 虚拟列表]] |
| [[lazy-loading | 懒加载]] |
六、体验与业务策略层
| 笔记 | 说明 |
|---|
| [[skeleton-screen | 骨架屏]] |
| [[optimistic-update | 乐观更新]] |
关系与对比入口
实战落地顺序
- 测：建指标、建监控、建基线、找瓶颈
- 传：CDN、压缩、缓存、减少关键路径请求
- 包：拆包、Tree Shaking、按需加载、图片字体优化
- 渲：减少重排重绘、优化动画、控制 DOM 数量、减少长任务
- 架：状态就近、组件拆分、减少重复渲染、虚拟列表、数据缓存
- 感：骨架屏、渐进加载、占位防抖动、乐观更新、弱网降级
- 管：预算、CI、监控、告警、复盘