Performance Profiling 技能：用 DevTools 定位筛选交互卡顿
EnglishClaude Code 安装步骤
- 从 GitHub 固定提交获取完整的 `cli-tool/components/skills/development/performance-profiling` 目录。
- 复制到目标项目的 `.claude/skills/`，确认 `.claude/skills/performance-profiling/SKILL.md`，再从项目根目录启动 Claude Code，输入 `/performance-profiling`。
中文摘要
用 Claude Code 复核 Chrome DevTools 性能记录，找出本地网页中耗时最长的脚本、布局或绘制，再用相同条件验证优化。
SKILL.md 中文导读
可复现示例
在本地目录页导入 2,000 条合成商品。用 Performance 面板录制输入 camera 的操作，找出运行时间最长的筛选函数。让函数只在搜索词改变时重算，再重复相同步骤，核对显示条数和执行时间。工作步骤
- 先录一段只包含单次筛选操作的基线 trace，确定占用主线程最多的函数或布局段。
- 只改一个可验证因素，再用同样的数据、浏览器和节流条件重录。把两次 trace 保留在本地以便复核。
验收方法
产出前后两份 trace，能定位到具体函数，并记录筛选结果是否一致。耗时变化以实际记录为准。
GitHub 原文 · 更新日期
适用环境
准备有稳定测试数据的本地页面与 Chrome DevTools。仓库另附 Lighthouse 脚本，运行该脚本时才需要 Python 与 Lighthouse CLI。
常见问题
Lighthouse 分数能指出哪一个筛选函数最慢吗？
用 DevTools Performance 的调用树和火焰图定位交互开销。Lighthouse 适合补看页面加载及其他实验室指标。