该技能用于识别并修复性能问题，从而构建更快、更流畅的用户体验。
一、用途 面向 UI 性能的诊断与修复，覆盖加载速度、渲染、动画、图片和打包体积等方面。当用户提到「慢」「卡顿」「不流畅」等性能相关表述时适用。整体原则是先测量再优化，避免过早优化，优先解决真正影响用户的问题。
二、主要能力
- 性能评估：测量 Core Web Vitals（LCP、FID/INP、CLS）、加载时间（可交互时间、首次内容绘制）、打包体积（JavaScript、CSS、图片大小）、运行时性能（帧率、内存、CPU）、网络（请求数、载荷大小、瀑布流）；识别瓶颈（哪里慢、原因是什么、严重程度、影响哪些用户）。强调测量前后对比，不测量不优化。
- 加载性能优化：图片使用现代格式（WebP、AVIF）、按显示尺寸调整、首屏以下懒加载、响应式图片（srcset、picture）、压缩、CDN；JS 方面做代码分割、tree shaking、移除未使用依赖、懒加载非关键代码、动态导入大组件；CSS 方面移除未使用样式、关键 CSS 内联、压缩、使用 CSS containment；字体方面使用 font-display: swap 或 optional、子集化、预加载关键字体、必要时用系统字体、限制字重；加载策略方面关键资源优先、预加载、预取、Service Worker、HTTP/2 或 HTTP/3。
- 渲染性能优化：避免布局抖动（先批量读、再批量写）；使用 CSS contain、减少 DOM 深度与体积、长列表用 content-visibility: auto 或虚拟滚动；用 transform 和 opacity 做动画、避免动画布局属性、谨慎使用 will-change、最小化绘制区域。
- 动画性能：使用 GPU 加速（transform、opacity），避免 CPU 绑定（left、width）；目标 60fps（每帧 16ms）；JS 动画用 requestAnimationFrame；滚动处理做防抖/节流；优先 CSS 动画；避免动画期间长时间 JS 运行；用 Intersection Observer 检测元素进入视口。
- React/框架优化：memo()、useMemo()、useCallback()、长列表虚拟化、路由代码分割、避免渲染中创建内联函数、使用 React DevTools Profiler；框架无关层面减少重渲染、防抖、记忆化、懒加载路由与组件。
- 网络优化：减少请求（合并小文件、SVG 雪碧图、内联关键小资源、移除无用第三方脚本）；API 优化（分页、GraphQL 按需字段、gzip/brotli 压缩、HTTP 缓存头、静态资源 CDN）；弱网优化（基于 navigator.connection 自适应加载、乐观 UI、请求优先级、渐进增强）。
- Core Web Vitals 定向优化：LCP < 2.5s（优化主图、内联关键 CSS、预加载、CDN、SSR）；FID < 100ms / INP < 200ms（拆分长任务、延迟非关键 JS、Web Worker、减少 JS 执行时间）；CLS < 0.1（为图片视频设置尺寸、不在已有内容上方注入、使用 aspect-ratio、为广告/嵌入预留空间、避免导致布局偏移的动画）。
- 性能监控：工具包括 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、打包体积、请求数。强调在真实设备与真实网络条件下测量。
- 改进验证：前后指标对比（如 Lighthouse 分数）、真实用户监控、不同设备测试（低端 Android 而非仅旗舰 iPhone）、弱网测试（限速至 3G）、确保无功能回归、关注用户感知是否变快。
三、使用方式 资料中给出了大量代码与配置示例，包括响应式图片的 srcset/sizes/loading 写法、React 懒加载组件、@font-face 的 font-display 与 unicode-range、布局抖动的错误与正确写法对比、GPU 加速与 CPU 绑定的动画对比、IntersectionObserver 用法、为图片容器用 aspect-ratio 预留空间等。具体调用方式或安装命令暂未提供。
四、适用场景 适用于 Web/前端界面出现加载慢、交互延迟、动画卡顿、图片过大、打包体积过大、Core Web Vitals 不达标等问题的诊断与修复。
五、限制与注意事项 资料明确列出若干禁忌：不测量就优化（过早优化）；为性能牺牲可访问性；优化时破坏功能；到处使用 will-change（会创建新图层、占用内存）；对首屏内容做懒加载；只做微优化而忽略主要瓶颈（应先优化最大瓶颈）；忽视移动端性能。
该技能定位为 UI 性能方向，属于前端与建站范畴。