前端性能优化分层框架
前端性能优化 6 大层级的职责、关系、依赖和演进路径。
#type / synthesis
#status / evergreen
#tech / dev / frontend
[!info] related notes
前端性能优化分层框架
范围
前端性能优化不是单点技术，而是全链路成本控制问题。 本笔记将前端一次访问拆成完整链路，并按 6 大层级组织优化策略。
为什么要放在一起理解
前端性能优化如果只看”技巧”，容易陷入头痛医头。 真正系统的做法是把一次访问拆成链路，每一层都可能成为瓶颈：
输入 URL → 网络请求 → 资源下载 → 解析 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 可交互 → 用户操作 → 数据更新 → 重新渲染 → 长期运行稳定性
6 大层级
第一层：指标与监控层
职责：先定义指标，再定位瓶颈，再做优化，再验证收益。
- 用户体验目标：用户实际感知
- 技术指标目标：FCP、LCP、INP、CLS、Bundle 体积等
- 业务目标：转化率、跳出率、停留时长
核心原则：没有监控的优化，很容易变成”感觉优化”。
第二层：网络与传输层
职责：资源怎么更快到浏览器。
- 减少请求数量：合并小资源、请求去重、接口聚合
- 压缩传输体积：gzip、brotli、图片格式选型
- 缓存：强缓存、协商缓存、接口缓存
- CDN：离用户更近，降低延迟
- 关键路径优化：preload、preconnect、dns-prefetch
相关笔记：关键路径优化、CDN 加速、资源压缩、HTTP 缓存策略
第三层：构建与资源层
职责：打包产物是不是太大、太多、太重。
- 控制 Bundle 体积：Tree Shaking、按需引入、去掉重复依赖
- 代码分割：路由级、组件级、功能级拆分
- CSS 优化：抽离关键 CSS、清理未使用样式
- 图片优化：格式选型、尺寸匹配、响应式图片
- 字体优化：子集化、font-display 配置
相关笔记：代码分割、Tree Shaking、首屏加载优化
第四层：渲染与运行时层
职责：浏览器渲染流水线和主线程执行效率。
- 减少重排重绘：合并 DOM 操作、避免读写交替
- 合成层动画：优先 transform、opacity
- 防抖与节流：控制高频事件
- 避免长任务：拆分大任务、Web Worker 卸载
- requestAnimationFrame：动画与浏览器刷新节奏对齐
相关笔记：浏览器渲染管线、合成层动画、长任务优化、防抖与节流
第五层：框架与应用架构层
职责：框架更新成本和状态管理策略。
- 减少不必要的更新：memo、computed、组件拆分
- 状态就近管理：避免全局状态过大
- 渲染模式选择：CSR、SSR、SSG 按页面类型选择
- 数据请求优化：请求去重、取消过期请求、分层加载
- 大列表优化：虚拟列表、分页、懒渲染
相关笔记：CSR、SSR 与 SSG、虚拟列表、懒加载
第六层：体验与业务策略层
职责：优化用户感知，而非纯技术指标。
- 骨架屏：更早看到内容结构
- Loading 分层：局部 loading、渐进展示
- 占位与防抖动：图片预留宽高，避免 CLS
- 乐观更新：先更新 UI 再异步提交
- 渐进增强：弱网降级、能力降级
对比与易混淆点
性能优化 vs 包体积优化
包体积只是其中一环。很多卡顿来自运行时渲染、状态更新策略、长任务阻塞。
实验室数据 vs 真实用户数据
Lighthouse 等实验室数据适合发现结构性问题，但真实用户监控（RUM）才知道用户到底慢不慢。
技术优化 vs 体验优化
Lighthouse 跑高分不等于用户体验好。骨架屏、乐观更新、占位防抖动这类”感知优化”往往比纯技术指标更有业务价值。