[!info] related notes

• 相关 MOC: 前端基础 MOC, 前端工程化 MOC, 前端高频面试题导航
• 关系笔记: frontend-performance-optimization-layered-framework, frontend-performance-optimization-misconceptions

前端性能优化 MOC

这张地图覆盖什么

前端性能优化不是单点技巧，而是一套系统工程。 核心目标：在用户感知上更快、更稳、更省。

本 MOC 按完整链路分层组织，覆盖从指标定义、网络传输、构建产物、浏览器渲染、框架更新、用户体验到工程化治理的全链路。

从这里开始

1. 先理解 前端性能优化分层框架，建立总览认知
2. 再看 性能指标体系，明确优化目标
3. 按分层逐层深入各原子笔记

核心笔记

一、指标与监控层

笔记	说明
性能指标体系	FCP、LCP、INP、CLS 等核心指标定义
首字节时间 TTFB	请求发出后到收到第一个字节的等待时间，常用于判断服务端开始响应是否过慢
性能监控体系	实验室数据、RUM 真实用户监控、业务埋点联动
性能预算	给项目设置体积、耗时预算，CI 阻断

二、网络与传输层

笔记	说明
关键路径优化	preload、preconnect、dns-prefetch、关键资源优先
CDN 加速	内容分发、就近访问、静态资源托管
资源压缩	gzip、brotli、图片格式选型、数据压缩
HTTP 缓存策略	强缓存、协商缓存、hash 文件名组合
Service Worker 与 Cache API	可编程缓存、离线能力、请求拦截

三、构建与资源层

笔记	说明
代码分割	路由级、组件级、功能级拆分
Tree Shaking	消除未引用代码，减少 bundle 体积
首屏加载优化	减少首屏关键工作量

四、渲染与运行时层

笔记	说明
浏览器渲染管线	DOM、CSSOM、Render Tree、Layout、Paint、Composite
合成层动画	transform、opacity 优先，避免重排重绘
长任务优化	拆分大任务、分片执行、Web Worker 卸载
防抖与节流	高频事件控制

五、框架与应用架构层

笔记	说明
CSR、SSR 与 SSG	渲染模式选择与性能影响
虚拟列表	长列表/大表格渲染优化
懒加载	非关键资源延迟加载

六、体验与业务策略层

笔记	说明
骨架屏	渐进式内容占位，提升感知速度
乐观更新	先更新 UI 再异步提交，感知更快

关系与对比入口

• 前端性能优化分层框架：6 大层级的职责、关系和依赖
• 前端性能优化常见误区：包体积迷信、缓存万能论、SSR 银弹、memo 滥用、Lighthouse 高分陷阱
• 前端性能优化面试回答框架：面试场景下的分层表达

实战落地顺序

1. 测：建指标、建监控、建基线、找瓶颈
2. 传：CDN、压缩、缓存、减少关键路径请求
3. 包：拆包、Tree Shaking、按需加载、图片字体优化
4. 渲：减少重排重绘、优化动画、控制 DOM 数量、减少长任务
5. 架：状态就近、组件拆分、减少重复渲染、虚拟列表、数据缓存
6. 感：骨架屏、渐进加载、占位防抖动、乐观更新、弱网降级
7. 管：预算、CI、监控、告警、复盘

• 前端性能优化实战

Related notes

• 性能指标体系
• 前端工程化中的性能优化