optimize

用途

该技能用于识别并修复界面性能问题，目标是创建更快、更流畅的用户体验。它覆盖加载速度、渲染、动画、图片和打包体积等多个维度，强调先测量再优化，优先解决真正影响用户的瓶颈。

主要能力

性能评估

帮助理解当前性能并识别问题，包括测量以下指标：

• Core Web Vitals：LCP、FID/INP、CLS 分数
• 加载时间：可交互时间、首次内容绘制
• 打包体积：JavaScript、CSS、图片大小
• 运行时性能：帧率、内存占用、CPU 占用
• 网络：请求数量、负载大小、瀑布流

同时帮助定位瓶颈：什么慢（初始加载、交互、动画）、原因是什么（大图、昂贵的 JavaScript、布局抖动）、严重程度如何、影响哪些用户（全部用户、仅移动端、慢速连接）。

加载性能优化

• 图片优化：使用现代格式（WebP、AVIF）、正确尺寸、折叠下方图片懒加载、响应式图片（srcset、picture）、压缩图片（80-85% 质量通常难以察觉）、使用 CDN。
• 减少 JavaScript 打包：代码分割（基于路由、基于组件）、tree shaking、移除未使用依赖、懒加载非关键代码、对大组件使用动态导入。
• CSS 优化：移除未使用 CSS、关键 CSS 内联其余异步、最小化 CSS 文件、对独立区域使用 CSS containment。
• 字体优化：使用 font-display: swap 或 optional、字体子集化、预加载关键字体、适当使用系统字体、限制加载的字重。
• 加载策略优化：关键资源优先（非关键使用 async/defer）、预加载关键资源、预取可能访问的下一页、Service Worker 用于离线/缓存、HTTP/2 或 HTTP/3 多路复用。

渲染性能优化

• 避免布局抖动：批量读取后再批量写入，避免读写交替触发重排。
• 优化渲染：对独立区域使用 CSS contain 属性、减少 DOM 深度、减少 DOM 大小、对长列表使用 content-visibility: auto、对超长列表使用虚拟滚动（react-window、react-virtualized）。
• 减少绘制与合成：动画使用 transform 和 opacity（GPU 加速）、避免动画布局属性（width、height、top、left）、谨慎使用 will-change、最小化绘制区域。

动画性能优化

• GPU 加速：使用 transform 和 opacity 实现 GPU 加速，避免 CPU 绑定的属性动画。
• 平滑 60fps：目标每帧 16ms、JS 动画使用 requestAnimationFrame、对滚动处理器做防抖/节流、尽量使用 CSS 动画、动画期间避免长时间运行的 JavaScript。
• Intersection Observer：高效检测元素进入视口，用于懒加载或动画触发。

框架优化

• React 相关：对昂贵组件使用 memo()、对昂贵计算使用 useMemo() 和 useCallback()、虚拟化长列表、路由代码分割、避免在渲染中创建内联函数、使用 React DevTools Profiler。
• 框架无关：最小化重渲染、对昂贵操作防抖、记忆化计算值、懒加载路由和组件。

网络优化

• 减少请求：合并小文件、图标使用 SVG sprites、内联小型关键资源、移除未使用的第三方脚本。
• API 优化：使用分页、GraphQL 只请求所需字段、响应压缩（gzip、brotli）、HTTP 缓存头、静态资源使用 CDN。
• 慢速连接优化：基于连接自适应加载（navigator.connection）、乐观 UI 更新、请求优先级、渐进增强。

Core Web Vitals 优化

• LCP < 2.5s：优化主图、内联关键 CSS、预加载关键资源、使用 CDN、服务端渲染。
• FID < 100ms / INP < 200ms：拆分长任务、延迟非关键 JavaScript、使用 Web Worker 处理重计算、减少 JavaScript 执行时间。
• CLS < 0.1：为图片和视频设置尺寸、不在已有内容上方注入内容、使用 aspect-ratio CSS 属性、为广告/嵌入预留空间、避免导致布局偏移的动画。

性能监控

• 工具：Chrome DevTools（Lighthouse、Performance 面板）、WebPageTest、Core Web Vitals（Chrome UX Report）、打包分析器（webpack-bundle-analyzer）、性能监控（Sentry、DataDog、New Relic）。
• 关键指标：LCP、FID/INP、CLS、可交互时间（TTI）、首次内容绘制（FCP）、总阻塞时间（TBT）、打包体积、请求数量。

使用方式

该技能以指导性方法呈现，按以下流程使用：先测量当前性能状态并识别瓶颈，再制定系统化改进计划，针对加载、渲染、动画、框架、网络和 Core Web Vitals 逐项优化，最后验证改进效果。资料中未提供具体的安装命令或调用方式。

适用场景

适用于需要提升界面性能的前端项目，包括：加载缓慢的页面、交互卡顿、动画不流畅、图片过大、打包体积过大、Core Web Vitals 分数不达标等情况。尤其强调移动端和慢速连接场景。

限制与注意事项

• 必须在优化前后进行测量，避免过早优化。
• 不得为性能牺牲可访问性。
• 不得在优化过程中破坏功能。
• 不要到处使用 will-change（会创建新图层、占用内存）。
• 不要懒加载折叠上方内容。
• 不要只做微优化而忽略主要瓶颈，应优先优化最大瓶颈。
• 不要忘记移动端性能（设备通常更慢、连接更慢）。
• 应在真实设备和真实网络条件下测量，桌面 Chrome 加快速连接不具代表性。
• 验证改进时需对比前后指标、进行真实用户监控、在不同设备上测试、在慢速连接（如 3G）下测试、确保无回归、关注用户感知是否更快。