用途：该技能系统梳理 Web 性能模式，帮助判断页面慢在哪一环，并给出对应优化方向。核心观点是性能问题通常来自网络、JavaScript、渲染、hydration、数据获取或布局稳定性中的某一主导因素，应先定位再优化。
主要能力：
- Core Web Vitals 解读：LCP（主内容可见速度，良好≤2.5s）、INP（交互响应，良好≤200ms）、CLS（布局稳定性，良好≤0.1），并说明各指标变差时的常见原因。
- 性能分桶：网络、JavaScript、渲染、Hydration、数据五类问题及典型修复。
- 十二个模式：减少 JS 体积、优先关键路径、懒加载非关键工作、减少渲染与布局开销、提前并行且更少地取数、优化图片媒体、谨慎管理字体、控制第三方脚本成本、推迟非紧急工作、稳定布局、正确缓存、前后测量。
- 架构影响：CSR、SSR、SSG、流式渲染、Islands/部分 hydration 的收益与风险。
- 性能预算与决策指南：按症状（首屏慢、首次交互慢、输入卡顿、布局跳动、路由切换慢）映射排查方向。
使用方式：文档以概念与模式说明为主，附带少量示意代码，如按需加载组件 const Chart = lazy(() => import('./Chart'));、预加载图片 <link rel="preload" href="/hero.webp" as="image">、并行取数 await Promise.all([getUser(), getNotifications()])、图片预留尺寸等。建议流程为：确定失败指标或慢流程，找到主导瓶颈，做最小有效修复，重新测量，并加入预算或护栏防止回退。
适用场景：前端性能优化、性能评审、架构选型讨论、制定性能预算。
限制：资料未提供具体工具链、框架版本、安装命令或量化基准，实际数值需结合自身测量；文中指标阈值为通用参考，不代表所有项目。