性能剖析

要解决什么问题

前端性能问题往往表现为「首屏慢、点不动、滚起来卡、内存一直涨」，但根因可能分布在 包体积、长任务、布局抖动 或 泄漏引用 等不同层面。没有测量就改代码，容易陷入微优化或猜瓶颈。本技能强调 先测量、再分析、最后优化，把 Lighthouse、包分析器与 Chrome DevTools 放进同一条可重复的工作流。

技能如何组织剖析

• Core Web Vitals：对照 LCP、INP、CLS 的目标阈值，并区分开发（本地 Lighthouse）、CI（Lighthouse CI）、生产（RUM）各阶段该用什么数据。
• 工具选型：按问题选工具——页面加载用 Lighthouse，包体积用包分析器，运行时用 Performance，内存用 Memory，网络用 Network。
• 包与运行时：从「大依赖、重复 chunk、低覆盖率、单一大包」到 tree shake、去重、路由级代码分割；从 Performance 里的长任务（>50ms）、布局/绘制，到 Memory 里堆持续增长、分离 DOM 等模式。
• 速赢与反模式：压缩、图片懒加载、路由分割等按优先级排序；并明确不要猜测、不要过早优化、不要忽视真实用户数据。

仓库内提供 scripts/lighthouse_audit.py，可对指定 URL 做 Lighthouse 性能审计，作为自动化入口之一。

适用边界

技能侧重 Web 前端 的测量与剖析方法论，不替代你对业务架构或后端接口的专项优化。生产环境结论仍应以 RUM 与真实流量为准；本地与 CI 分数只能指导迭代方向。