Open Skills Logo
Open Skills

performance-optimization

优化前端、后端、查询和数据库的应用性能。当存在性能要求时使用；当你怀疑性能回归时使用；当需要改善核心网页指标（Core Web Vitals）或加载时间时使用；当需要修复 N+1 查询模式时使用；或当性能分析发现瓶颈时使用。

作者

@addyosmani

分类

开发工具

安装

热度:32

下载并解压到你的 skills 目录

复制命令，发送给智能体自动安装：

下载并安装这个技能 https://openskills.cc/api/download?slug=addyosmani-skills-performance-optimization&locale=zh&source=copy

性能优化

技能概述

性能优化技能帮助开发者在优化前先进行测量，通过系统化方法识别和解决前端、后端、数据库查询中的真实性能瓶颈，避免过早优化带来的复杂性。

适用场景

  • 页面加载速度慢：当首屏加载时间过长、Lighthouse 性能分数低、Core Web Vitals 指标不达标时，使用该技能快速定位是网络请求、服务器响应还是客户端渲染导致的问题。

  • API 响应缓慢：当单个或多个 API 接口响应时间超出预期，存在 N+1 查询、缺少索引或缓存策略缺失等问题时，使用该技能识别数据库和服务器端瓶颈。

  • 需要建立性能监控体系：当项目缺少性能监控、没有性能基线数据，或需要在 CI 中集成性能测试时，使用该技能搭建从测量到验证的完整优化流程。

    • 核心功能

  • 测量优先的性能诊断流程：提供"测量 → 识别 → 修复 → 验证 → 防护"五步优化工作流，通过 Lighthouse、Web Vitals 库和 APM 工具建立真实性能基线，避免凭猜测优化。

  • 常见性能反模式修复指南：覆盖 N+1 查询、无边界数据获取、图片未优化、React 不必要重渲染、打包体积过大、缺少缓存等典型问题，提供具体代码对比和解决方案。

  • Core Web Vitals 优化标准：明确 LCP（≤2.5s）、INP（≤200ms）、CLS（≤0.1）等指标的合格阈值，帮助开发者将抽象的"性能好坏"转化为可衡量的具体目标。

    • 常见问题

    什么时候应该进行性能优化？

    只有在有证据表明存在性能问题时才应该优化。常见的触发条件包括：性能需求存在于规格说明中、用户或监控报告显示缓慢行为、Core Web Vitals 分数低于阈值、怀疑某次变更引入了回归，或正在构建处理大数据量和高流量的功能。避免"先优化再说"的心态——没有测量数据的优化往往会增加复杂性而无法改善真正重要的指标。

    如何确定真正的性能瓶颈？

    根据症状选择测量起点：首次加载慢要检查网络瀑布流（DNS、TCP、TLS、服务器等待时间）、打包体积和渲染阻塞资源；交互卡顿要分析主线程长任务（>50ms）、组件重渲染和布局抖动；导航后页面慢要测量 API 响应时间和客户端渲染时长；后端 API 慢要分析数据库查询日志、索引、连接池和缓存策略。使用 Chrome DevTools Performance 面板、Lighthouse 和 Web Vitals 库收集真实数据。

    性能优化后如何验证效果？

    任何性能相关变更都需要有"前后对比"的具体数据。验证检查项包括：核心 Web Vitals 指标是否达到"良好"阈值、打包体积没有显著增加、新代码中不存在 N+1 查询、性能预算在 CI 中通过、现有测试仍然通过（优化未破坏功能）。对于影响用户体验的优化，还需结合真实用户监控（RUM）数据确认改善在实际环境中生效。