SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场webperf-interaction

webperf-interaction

前端与建站

查看项目

更新于 10-15 15:34

技能介绍

用途

这是一套用于在 Chrome DevTools 中测量 Web 性能的 JavaScript 片段（snippets），所属技能聚焦“交互与动画”方向。它的目标场景是分析页面交互性能，包括 INP 调试、滚动卡顿调查和主线程阻塞定位。资料说明这些脚本通过 mcp__chrome-devtools__evaluate_script 执行，并通过 mcp__chrome-devtools__get_console_message 捕获输出。

主要能力与包含脚本

资料列出的脚本及其用途如下：

  • scripts/DOM-Size-and-Depth.js — DOM 大小与深度
  • scripts/Forced-Synchronous-Layout.js — 强制同步布局检测器
  • scripts/Input-Latency-Breakdown.js — 输入延迟拆解
  • scripts/Interactions.js — 交互列表
  • scripts/Layout-Shift-Loading-and-Interaction.js — 布局偏移跟踪
  • scripts/Long-Animation-Frames-Helpers.js — LoAF 辅助工具
  • scripts/Long-Animation-Frames-Script-Attribution.js — 长动画帧脚本归因
  • scripts/Long-Animation-Frames.js — 长动画帧（LoAF）
  • scripts/LongTask.js — 长任务
  • scripts/Scroll-Performance.js — 滚动性能分析

使用方式与常见工作流

资料给出多种基于用户诉求触发的组合工作流：

  1. 完整交互性能审计（用户要求交互分析或“audit responsiveness”时）：依次运行 Interactions.js、Input-Latency-Breakdown.js、Long-Animation-Frames.js、LongTask.js、Scroll-Performance.js。
  2. INP 深度排查（INP 慢于 200ms 或用户要求“debug INP”“slow interactions”时）：运行 Interactions.js、Input-Latency-Breakdown.js、Long-Animation-Frames.js、Long-Animation-Frames-Script-Attribution.js、Long-Animation-Frames-Helpers.js。
  3. 滚动卡顿调查：运行 Scroll-Performance.js、Long-Animation-Frames.js、Layout-Shift-Loading-and-Interaction.js、Long-Animation-Frames-Script-Attribution.js。
  4. 主线程阻塞分析：运行 LongTask.js、Long-Animation-Frames.js、Long-Animation-Frames-Script-Attribution.js，并与 webperf-loading 技能的 JS-Execution-Time-Breakdown.js、First-And-Third-Party-Script-Info.js 交叉参考。
  5. 交互期间布局偏移：运行 Layout-Shift-Loading-and-Interaction.js、Interactions.js，并结合 webperf-core-web-vitals 技能的 CLS.js，以及与 webperf-media 的 Image-Element-Audit.js 交叉参考。
  6. 动画性能分析：运行 Long-Animation-Frames.js、Long-Animation-Frames-Helpers.js、Long-Animation-Frames-Script-Attribution.js、Scroll-Performance.js、DOM-Size-and-Depth.js。
  7. 第三方脚本对交互的影响：运行 Long-Animation-Frames-Script-Attribution.js、LongTask.js，并交叉引用 webperf-loading 的 First-And-Third-Party-Script-Info.js、First-And-Third-Party-Script-Timings.js、Script-Loading.js。

决策树与阈值

资料提供了一套决策树，依据各脚本结果自动触发后续分析。例如：Interactions.js 若发现任一交互超过 200ms，则运行 Input-Latency-Breakdown.js 并配合官方 INP 测量；Input-Latency-Breakdown.js 中输入延迟超过 50ms 提示主线程繁忙，处理时间超过 100ms 提示事件处理器过重，呈现延迟超过 50ms 提示渲染瓶颈；LongTask.js 若长任务超过 5 个或超过 500ms 触发进一步的脚本归因与执行成本分析。

性能预算阈值包括：INP 良好 ≤200ms、需改进 200-500ms、差 >500ms；长动画帧警告 >50ms、严重 >100ms；长任务警告 >50ms、严重 >200ms 或每秒超过 5 个；滚动性能良好 ≥50 FPS、需改进 30-50 FPS、差 <30 FPS；交互频率超过每秒 10 次时优先优化 INP，低于每 5 秒 1 次时聚焦首次交互响应。

适用场景

适用于前端性能工程师与开发者定位交互响应慢、动画掉帧、滚动卡顿、主线程阻塞、交互触发布局偏移，以及第三方脚本对交互与渲染的影响等问题。

限制与暂未提供

该技能依赖 Chrome DevTools 环境及相关 MCP 调用。资料未提供安装命令、具体脚本源码、价格与收费信息、支持平台范围等细节，这些内容暂未提供。