前端性能优化（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/FCP/CLS/TTI 与 Speed Index
- 若有具体慢的操作：描述操作 + 主观耗时或 Performance 时长
- 若有 bundle 诉求：给出当前主要 chunk 体积
2. 找瓶颈
- - 加载：Network 看瀑布图、哪些请求阻塞或过大
- 运行时：Performance 录屏看长任务、布局/样式计算
- 打包：用分析工具（如
@next/bundle-analyzer）看大模块
3. 列方案并标性价比
每个方案注明：
- - 收益：预期提升的指标或体感
- 成本：改动量、风险、依赖
- 优先级：高/中/低（高收益低成本优先）
4. 给出落地顺序
- - 先做「快速见效」：如图片尺寸、font-display、关键 CSS、首屏懒加载
- 再做「中等改动」：路由级拆包、虚拟列表、缓存策略
- 最后考虑「大改动」：架构调整、SSR、边缘渲染等
输出模板
CODEBLOCK0
项目相关
- - Next.js：用
dynamic 懒加载、Image 组件、分析 INLINECODE2 - React：避免在渲染里创建新对象/函数导致子组件无效重渲染，必要时 memo/useMemo/useCallback
- 长列表：优先虚拟滚动（如 react-window、tanstack-virtual）再考虑分页
前端性能优化（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/FCP/CLS/TTI 与 Speed Index
- 若有具体慢的操作：描述操作 + 主观耗时或 Performance 时长
- 若有 bundle 诉求：给出当前主要 chunk 体积
2. 找瓶颈
- - 加载：Network 看瀑布图、哪些请求阻塞或过大
- 运行时：Performance 录屏看长任务、布局/样式计算
- 打包：用分析工具（如 @next/bundle-analyzer）看大模块
3. 列方案并标性价比
每个方案注明：
- - 收益：预期提升的指标或体感
- 成本：改动量、风险、依赖
- 优先级：高/中/低（高收益低成本优先）
4. 给出落地顺序
- - 先做「快速见效」：如图片尺寸、font-display、关键 CSS、首屏懒加载
- 再做「中等改动」：路由级拆包、虚拟列表、缓存策略
- 最后考虑「大改动」：架构调整、SSR、边缘渲染等
输出模板
markdown
性能优化报告
现状
优化方案（按优先级）
… | … | … |
建议落地顺序
- 1. …
- …
验证方式
- - 优化后建议复测：Lighthouse、Performance、关键操作耗时
项目相关
- - Next.js：用 dynamic 懒加载、Image 组件、分析 next/bundle-analyzer
- React：避免在渲染里创建新对象/函数导致子组件无效重渲染，必要时 memo/useMemo/useCallback
- 长列表：优先虚拟滚动（如 react-window、tanstack-virtual）再考虑分页
