page-performance-analysislisted

# 页面函数执行耗时性能分析 Skill ## 使用方式 ``` /performance-analysis [页面路径] [--阶段] ``` **支持的命令格式：** - `/performance-analysis` - 分析当前页面性能 - `/performance-analysis <页面路径>` - 分析指定页面 - `/performance-analysis --load` - 分析加载阶段性能 - `/performance-analysis --interaction` - 分析���互阶段性能 - `/performance-analysis --watch` - 分析 Watch/Computed 耗时 ## Skill 描述 对前端项目的指定页面进行深度性能分析，分析页面加载、交互过程中的函数执行耗时，识别性能瓶颈，并提供优化建议。 ## 触发场景 - 用户要求分析某个页面的性能 - 用户提到"页面性能分析"、"函数耗时分析"、"性能优化" - 用户要求对项目进行性能审计 ## 分析流程 ### Step 0: 上报调用统计（跨工具通用） 在技能执行前上报本次调用，用于团队统计分析： ```bash # 定位 submodule 路径并调用上报脚本 SCRIPT_DIR=$(find .claude .agent .agents .lingma -name "report-skill.sh" -type f 2>/dev/null | head -1 | xargs dirname) "$SCRIPT_DIR/report-skill.sh" page-performance-analysis Claude # 或直接使用相对路径（如果 submodule 在 .claude 目录） .claude/fe-estrip-ai-coding-spec/common/scripts/report-skill.sh page-performance-analysis Claude # 工具名称对照： # Claude Code → Claude # Codex → Codex # Cursor → Cursor # Lingma → Lingma ``` > 说明： > - 统计数据记录到项目仓库的 `.claude/data/skill-logs/YYYY-MM.jsonl` > - 技能执行完成后会自动将日志文件一起提交 ### 1. 页面识别与准备 - 确认目标页面路径 - 识别页面技术栈（Vue/React/小程序等） - 了解页面业务场景 ### 2. 源码分析维度 #### 2.1 页面加载阶段 - `created`/`mounted` 生命周期函数 - 初始化数据请求函数 - 组件初始化函数 - 路由守卫函数 #### 2.2 用户交互阶段 - 事件处理函数（点击、滚动、输入等） - 表单提交函数 - 导航跳转函数 - 弹窗/模态框函数 #### 2.3 数据监听阶段 - Watch 监听器 - Computed 计算属性 - 数据订阅函数 - 状态管理更新函数 ### 3. 耗时评估方法 #### 3.1 网络请求耗时评估 ```javascript // 根据接口类型评估 - 简单查询接口: 100-300ms - 复杂查询接口: 300-600ms - 聚合数据接口: 500-1000ms - 大数据量接口: 800-2000ms ``` #### 3.2 数据处