核心用法
frontend-performance 是一个面向前端加载性能与运行性能的诊断与优化技能。它通过 Lighthouse 报告、Performance 录屏或用户描述的现象，定位真正的性能瓶颈（而非凭感觉），并给出可落地的分级优化方案。
典型使用流程：
1. 诊断先行：先判断用户问题是「加载慢」「运行时卡顿」还是「bundle 体积大」，没有数据时拒绝给出方案，要求先跑 Lighthouse 或 Performance 录屏
2. 瓶颈定位：根据具体指标（LCP>2.5s、FCP>1.8s、CLS 高、长任务>50ms 等）按优先级排查网络瀑布图、渲染阻塞、服务端响应、DOM 操作等
3. 分级方案：按「快速见效（1天内）→ 中等改动（1-3天）→ 大改动（需评估）」给出优化建议，每项标注改动量、预期收益与风险
4. 验证闭环：每项优化后提供验证方式（Lighthouse 分数对比、Performance 长任务对比、bundle 体积对比）
核心覆盖领域：
- 加载性能：LCP、FCP、TTI、TTFB 优化
- 体验稳定性：CLS 治理、滚动与操作卡顿
- 资源与打包：代码分割、tree-shaking、图片优化、CDN 策略
- 框架专项：Next.js 动态加载、React 渲染优化、虚拟列表
显著优点
- 数据驱动：强制要求 Lighthouse/Performance 数据，杜绝「感觉慢」的盲目优化
- 分级决策：明确区分快速方案与大改动，避免一上来就推荐 SSR/换构建工具等高成本操作
- 风险透明：每项方案标注改动成本与潜在风险，便于技术决策
- 验证闭环：提供可量化的验证方式，确保优化效果可追踪
- 框架适配：针对 Next.js、React 等主流框架给出具体工具链建议
潜在缺点与局限性
- 依赖用户配合：需要用户提供 Lighthouse 报告或 Performance 录屏，若用户无法提供则无法深入诊断
- 服务端瓶颈受限：TTFB>600ms 时判定为服务端问题，前端技能在此边界停止，需额外协调后端
- 复杂场景简化：部分性能问题涉及网络环境、硬件差异等外部因素，标准化方案可能无法覆盖所有边缘情况
- 框架限制：专项建议以 React/Next.js 为主，Vue/Svelte 等其他框架用户需自行迁移概念
适合人群
- 前端开发者遇到首屏慢、页面卡顿、打包体积大等问题
- 技术负责人需要评估性能优化的投入产出比
- 希望系统提升 Core Web Vitals 指标、改善 SEO 与用户体验的团队
常规风险
- 过早优化：未确认瓶颈就实施大改动（如 CSR 改 SSR），可能投入高成本低收益
- 指标回归：优化后未持续监控，随业务迭代性能再次恶化
- 副作用引入：如过度使用
memo/useMemo反而增加内存开销，或preload过多关键资源导致带宽竞争 - 数据误读：Lighthouse 实验室数据与用户真实环境（RUM）存在偏差，需结合两者判断