frontend-performance

# 前端性能优化（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. … | … | … | 高/中/低 | | 2. … | … | … | … | ### 建议落地顺序 1. … 2. … ### 验证方式 - 优化后建议复测：Lighthouse、Performance、关键操作耗时 ``` ## 项目相关 - Next.js：用 `dynamic` 懒加载、Image 组件、分析 `next/bundle-analyzer` - React：避免在渲染里创建新对象/函数导致子组件无效重渲染，必要时 memo/useMemo/useCallback - 长列表：优先虚拟滚动（如 react-window、tanstack-virtual）再考虑分页