前端性能优化（Frontend Performance）

围绕加载性能与运行性能，给出可落地的优化方案与优先级。

触发场景

• 用户说「性能优化」「首屏慢」「页面卡顿」「打包体积大」「LCP/FCP 差」
• 提供 Lighthouse 报告、Performance 录屏或具体慢的页面/操作

分析维度

1. 加载性能（LCP / FCP / TTI）

| 问题 | 常见原因 | 优化方向 |

|------|----------|----------|

| LCP 慢 | 大图、阻塞渲染、服务端慢 | 图片优化、优先关键资源、SSR/预取 |

| FCP 慢 | JS/CSS 阻塞、首屏依赖多 | 拆包、关键 CSS 内联、延迟非关键 |

| TTI 长 | 主线程长任务、大 bundle | 代码分割、懒加载、减少主线程工作 |

2. 体验稳定性（CLS / 卡顿）

| 问题 | 常见原因 | 优化方向 |

|------|----------|----------|

| CLS 高 | 无尺寸图片/字体、动态插入内容 | 宽高比/尺寸、font-display、预留占位 |

| 滚动/操作卡顿 | 重排多、长任务、大列表 | 虚拟列表、防抖节流、requestAnimationFrame、减少 reflow |

3. 资源与打包

| 问题 | 优化方向 |

|------|----------|

| JS 体积大 | 按路由/按需拆包、tree-shaking、替换大依赖、分析 bundle |

| 图片大 | 格式（WebP/AVIF）、尺寸、懒加载、CDN |

| 请求多 | 合并、缓存策略、预连接/preload |

执行流程

1. 先定位用户的问题类型

不要一上来就输出所有优化方向，先判断用户卡在哪：

| 用户描述 | 实际问题 | 第一步 |

|---------|---------|-------|

| 「首屏慢」「白屏时间长」 | 加载性能 | 问：有没有 Lighthouse 数据？LCP 是多少？是 SSR 还是 CSR？ |

| 「页面卡顿」「滚动不流畅」 | 运行时性能 | 问：卡顿发生在什么操作时？列表有多少条数据？ |

| 「打包体积大」「bundle 太大」 | 资源体积 | 直接让用户跑 npx @next/bundle-analyzer 或 vite-bundle-visualizer，看大模块再说 |

| 「LCP/FCP 差」「Core Web Vitals 不达标」 | 具体指标 | 问：哪个指标？多少分？在哪个页面？ |

| 没有数据，只是「感觉慢」 | 未量化 | 先让用户跑 Lighthouse，拿到数据再分析，不要凭感觉给优化建议 |

没有数据就不给优化方案——「感觉慢」可能是网络问题、可能是服务端问题、可能是前端问题，方向不同。

2. 拿到数据后，找真正的瓶颈

加载性能（LCP > 2.5s 或 FCP > 1.8s），按这个顺序排查：

1. Network 瀑布图：最大的资源是什么？JS bundle 还是图片？
2. 是否有渲染阻塞资源（

   Skill工具集 © 2026