Frontend Performance

核心功能

本技能专注于前端性能优化的全链路诊断与改进，围绕加载性能（LCP/FCP/TTI）和运行性能（CLS/卡顿）两大维度，提供从现状量化、瓶颈定位到落地执行的完整方法论。

显著优点

1. 结构化分析框架：将复杂性能问题拆解为加载、体验稳定性、资源打包三大维度，每个维度配套「问题-原因-方案」对照表，降低诊断门槛。

2. 性价比驱动的优先级排序：独创「收益-成本-优先级」评估模型，避免盲目优化，确保资源投入产出最大化。

3. 多场景覆盖：既支持 Lighthouse/Performance 等工具报告解读，也支持主观体感描述的问题排查，适配不同技术深度的用户。

4. 框架级最佳实践：内置 Next.js、React 等主流框架的具体优化手段（如 dynamic 懒加载、Image 组件、虚拟列表选型），减少方案落地时的技术调研成本。

潜在局限

1. 工具链依赖：部分深度分析需依赖 Chrome DevTools、Lighthouse 等外部工具，技能本身不直接执行数据采集。

2. 服务端性能边界：主要聚焦前端侧优化，服务端响应慢（TTFB 差）等问题仅能给出方向性建议，无法深入服务端调优。

3. 业务场景抽象：针对复杂业务逻辑导致的性能问题（如大数据计算、复杂状态管理），需结合具体代码进一步分析。

适合人群

• 前端开发工程师遇到首屏慢、页面卡顿、包体积过大等具体问题
• 技术负责人需要制定性能优化 roadmap 与资源分配策略
• 对 Core Web Vitals 指标有优化需求的 SEO/性能专项团队

常规风险

• 过度优化风险：盲目追求极致指标可能引入代码复杂度，需权衡用户体验与维护成本
• 测试环境偏差：本地 Lighthouse 分数与真实用户环境（RUM）可能存在差异，建议结合真实数据验证
• 框架版本差异：部分优化手段（如 Next.js Image）在不同版本行为可能变化，需确认版本兼容性

核心用法

该 Skill 是一款面向前端开发者的性能优化诊断工具，专注于解决首屏加载慢、页面卡顿、打包体积过大等常见问题。用户可通过提供 Lighthouse 报告、Performance 录屏或描述具体慢的操作来触发分析。Skill 会从加载性能（LCP/FCP/TTI）、体验稳定性（CLS/卡顿）、资源与打包三大维度进行系统诊断，并输出包含现状量化、瓶颈定位、优化方案优先级排序及落地建议的完整报告。

显著优点

专业体系化：覆盖 Google Core Web Vitals 全指标体系，提供从问题识别到方案落地的完整闭环，而非零散的建议堆砌。性价比导向：每个优化方案均标注预期收益、改动成本和优先级，帮助团队在有限资源下做最优决策。框架适配：针对 Next.js、React 等主流框架提供专属优化建议（如 dynamic 懒加载、Image 组件、虚拟滚动库推荐）。零执行风险：纯文档型技能，不含任何可执行代码或外部 API 调用，完全规避了供应链攻击和恶意代码注入风险。

潜在缺点与局限性

依赖输入质量：诊断效果高度依赖用户提供的数据完整性，若缺乏 Lighthouse 评分、Performance 录屏或 bundle 体积数据，分析深度会受限。非自动化工具：仅提供优化方案和代码示例，无法直接修改项目代码或自动实施优化，需要开发者手动执行。框架覆盖有限：虽提及 Next.js 和 React，但对 Vue、Angular、Svelte 等框架的针对性建议较少，通用性方案需开发者自行适配。无实时监测：不提供持续性能监控能力，优化后的效果验证需用户借助外部工具完成。

适合的目标群体

前端开发工程师：尤其是需要系统提升性能优化方法论、建立指标意识的初中级开发者。技术负责人/架构师：在团队内推动性能体系建设，需要标准化诊断流程和决策框架的管理者。需要交付性能优化报告的项目团队：如客户项目验收、技术债清理阶段的结构化文档输出需求。对供应链安全敏感的企业环境：由于该 Skill 零代码执行特性，特别适合安全审计严格、禁止引入未审核代码的组织。

使用风险

性能风险：无。该 Skill 不执行任何代码，不占用运行时资源。依赖风险：无第三方依赖，无供应链攻击面。隐私风险：无用户数据收集，符合 GDPR/CCPA 规范。功能风险：主要风险在于过度依赖 Skill 建议而忽视实际业务场景差异。部分优化方案（如 SSR、边缘渲染）涉及架构级改动，需充分评估团队技术储备和运维成本。此外，文档中的优化方向需结合具体项目技术栈调整，直接套用可能导致兼容性问题。