Back to Details

webperf-interaction

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WebPerf: Interaction & Animation

WebPerf：交互与动画

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with 
mcp__chrome-devtools__evaluate_script
, capture output with 
mcp__chrome-devtools__get_console_message
.
用于在Chrome DevTools中测量网页性能的JavaScript代码片段。使用
mcp__chrome-devtools__evaluate_script
执行，通过
mcp__chrome-devtools__get_console_message
捕获输出。

Scripts

脚本

  • scripts/Input-Latency-Breakdown.js
    — Input Latency Breakdown
  • scripts/Interactions.js
    — Interactions
  • scripts/Layout-Shift-Loading-and-Interaction.js
    — Layout Shift Tracking
  • scripts/Long-Animation-Frames-Helpers.js
    — LoAF Helpers
  • scripts/Long-Animation-Frames-Script-Attribution.js
    — Long Animation Frames Script Attribution
  • scripts/Long-Animation-Frames.js
    — Long Animation Frames (LoAF)
  • scripts/LongTask.js
    — Long Tasks
  • scripts/Scroll-Performance.js
    — Scroll Performance Analysis
  • scripts/Input-Latency-Breakdown.js
    — 输入延迟分解
  • scripts/Interactions.js
    — 交互分析
  • scripts/Layout-Shift-Loading-and-Interaction.js
    — 布局偏移追踪
  • scripts/Long-Animation-Frames-Helpers.js
    — 长动画帧辅助工具
  • scripts/Long-Animation-Frames-Script-Attribution.js
    — 长动画帧脚本归因
  • scripts/Long-Animation-Frames.js
    — 长动画帧（LoAF）
  • scripts/LongTask.js
    — 长任务分析
  • scripts/Scroll-Performance.js
    — 滚动性能分析

Common Workflows

常见工作流

Complete Interaction Performance Audit

完整交互性能审计

When the user asks for interaction analysis or "audit responsiveness":
  1. Interactions.js - List all user interactions with timing
  2. Input-Latency-Breakdown.js - Break down interaction phases
  3. Long-Animation-Frames.js - Detect blocking animation frames
  4. LongTask.js - Identify long tasks blocking the main thread
  5. Scroll-Performance.js - Measure scroll smoothness
当用户要求进行交互分析或询问“响应性审计”时：
  1. Interactions.js - 列出所有用户交互及其计时数据
  2. Input-Latency-Breakdown.js - 分解交互阶段的延迟
  3. Long-Animation-Frames.js - 检测阻塞性动画帧
  4. LongTask.js - 识别阻塞主线程的长任务
  5. Scroll-Performance.js - 测量滚动流畅度

INP Deep Dive

INP深度排查

When INP is slow (>200ms) or the user asks "debug INP" or "slow interactions":
  1. Interactions.js - Identify which interactions are slow
  2. Input-Latency-Breakdown.js - Break down into input delay, processing time, presentation delay
  3. Long-Animation-Frames.js - Find animation frames >50ms that block interactions
  4. Long-Animation-Frames-Script-Attribution.js - Identify scripts causing the blocking
  5. Long-Animation-Frames-Helpers.js - Get detailed timing and attribution helpers
当INP数值过高（>200ms）或用户询问“调试INP”或“交互缓慢”时：
  1. Interactions.js - 定位哪些交互存在缓慢问题
  2. Input-Latency-Breakdown.js - 分解为输入延迟、处理时间、呈现延迟
  3. Long-Animation-Frames.js - 找出阻塞交互的、时长>50ms的动画帧
  4. Long-Animation-Frames-Script-Attribution.js - 识别导致阻塞的脚本
  5. Long-Animation-Frames-Helpers.js - 获取详细的计时和归因辅助数据

Scroll Jank Investigation

滚动卡顿排查

When the user reports "scroll jank", "choppy scrolling", or "scroll performance issues":
  1. Scroll-Performance.js - Measure scroll smoothness and frame drops
  2. Long-Animation-Frames.js - Detect frames causing jank (>50ms)
  3. Layout-Shift-Loading-and-Interaction.js - Check for layout shifts during scroll
  4. Long-Animation-Frames-Script-Attribution.js - Find scripts running during scroll
当用户反馈“滚动卡顿”、“滚动不流畅”或“滚动性能问题”时：
  1. Scroll-Performance.js - 测量滚动流畅度和丢帧情况
  2. Long-Animation-Frames.js - 检测导致卡顿的、时长>50ms的帧
  3. Layout-Shift-Loading-and-Interaction.js - 检查滚动过程中的布局偏移
  4. Long-Animation-Frames-Script-Attribution.js - 找出滚动期间运行的脚本

Main Thread Blocking Analysis

主线程阻塞分析

When the page feels unresponsive or the user asks "why is the page frozen":
  1. LongTask.js - List all tasks >50ms blocking the main thread
  2. Long-Animation-Frames.js - Correlate with animation frame timing
  3. Long-Animation-Frames-Script-Attribution.js - Attribute blocking to specific scripts
  4. Cross-reference with webperf-loading skill:
    • JS-Execution-Time-Breakdown.js (script parsing/execution time)
    • First-And-Third-Party-Script-Info.js (identify third-party blockers)
当页面无响应或用户询问“页面为什么冻结”时：
  1. LongTask.js - 列出所有时长>50ms的、阻塞主线程的任务
  2. Long-Animation-Frames.js - 关联动画帧计时数据
  3. Long-Animation-Frames-Script-Attribution.js - 将阻塞问题归因到具体脚本
  4. 与webperf-loading技能交叉引用：
    • JS-Execution-Time-Breakdown.js（脚本解析/执行时间）
    • First-And-Third-Party-Script-Info.js（识别第三方阻塞脚本）

Layout Shift During Interaction

交互期间的布局偏移

When the user reports "things move when I click" or CLS issues during interaction:
  1. Layout-Shift-Loading-and-Interaction.js - Separate loading vs interaction shifts
  2. Interactions.js - Correlate shifts with specific interactions
  3. CLS.js (from Core Web Vitals skill) - Measure total CLS
  4. Cross-reference with webperf-media skill:
    • Image-Element-Audit.js (images without dimensions causing shifts)
当用户反馈“点击时元素移动”或交互期间存在CLS问题时：
  1. Layout-Shift-Loading-and-Interaction.js - 区分加载阶段与交互阶段的布局偏移
  2. Interactions.js - 将偏移与具体交互关联
  3. CLS.js（来自Core Web Vitals技能）- 测量总CLS数值
  4. 与webperf-media技能交叉引用：
    • Image-Element-Audit.js（检查未设置尺寸的图片导致的偏移）

Animation Performance Analysis

动画性能分析

When animations feel sluggish or the user asks "debug animation performance":
  1. Long-Animation-Frames.js - Identify frames taking too long to render
  2. Long-Animation-Frames-Helpers.js - Detailed frame timing analysis
  3. Long-Animation-Frames-Script-Attribution.js - Find scripts delaying frames
  4. Scroll-Performance.js - If scroll animations are involved
当动画运行缓慢或用户询问“调试动画性能”时：
  1. Long-Animation-Frames.js - 识别渲染耗时过长的帧
  2. Long-Animation-Frames-Helpers.js - 详细的帧计时分析
  3. Long-Animation-Frames-Script-Attribution.js - 找出延迟帧渲染的脚本
  4. Scroll-Performance.js - 如果涉及滚动动画

Third-Party Script Impact on Interactions

第三方脚本对交互的影响

When interactions are slow and third-party scripts are suspected:
  1. Long-Animation-Frames-Script-Attribution.js - Identify third-party scripts in long frames
  2. LongTask.js - Measure long task frequency
  3. Cross-reference with webperf-loading skill:
    • First-And-Third-Party-Script-Info.js (list all third-party scripts)
    • First-And-Third-Party-Script-Timings.js (measure script loading impact)
    • Script-Loading.js (check for blocking scripts)
当交互缓慢且怀疑是第三方脚本导致时：
  1. Long-Animation-Frames-Script-Attribution.js - 识别长帧中的第三方脚本
  2. LongTask.js - 测量长任务的发生频率
  3. 与webperf-loading技能交叉引用：
    • First-And-Third-Party-Script-Info.js（列出所有第三方脚本）
    • First-And-Third-Party-Script-Timings.js（测量脚本加载的影响）
    • Script-Loading.js（检查阻塞性脚本）

Decision Tree

决策树

Use this decision tree to automatically run follow-up snippets based on results:
使用此决策树根据结果自动运行后续代码片段：

After Interactions.js

运行Interactions.js之后

  • If any interaction > 200ms → Run Input-Latency-Breakdown.js on slow interactions; also run webperf-core-web-vitals:INP.js for official INP measurement
  • If many interactions > 200ms → Main thread congestion, run:
    1. Long-Animation-Frames.js (blocking frames)
    2. LongTask.js (long tasks)
    3. Long-Animation-Frames-Script-Attribution.js (culprit scripts)
  • If specific interaction types are slow (e.g., click vs keyboard) → Focus on that interaction type
  • If interactions occur during page load → Cross-check with webperf-loading:JS-Execution-Time-Breakdown.js
  • 如果存在时长>200ms的交互 → 对缓慢交互运行Input-Latency-Breakdown.js；同时运行webperf-core-web-vitals:INP.js进行官方INP测量
  • 如果存在多个时长>200ms的交互 → 主线程拥堵，运行：
    1. Long-Animation-Frames.js（阻塞性帧）
    2. LongTask.js（长任务）
    3. Long-Animation-Frames-Script-Attribution.js（问题脚本）
  • 如果特定类型的交互缓慢（如点击 vs 键盘操作） → 聚焦该类型的交互
  • 如果交互发生在页面加载期间 → 与webperf-loading:JS-Execution-Time-Breakdown.js交叉检查

After Input-Latency-Breakdown.js

运行Input-Latency-Breakdown.js之后

  • If Input Delay > 50ms → Main thread was busy, run:
    1. Long-Animation-Frames.js (what was blocking)
    2. LongTask.js (long task before interaction)
  • If Processing Time > 100ms → Heavy event handlers, run:
    1. Long-Animation-Frames-Script-Attribution.js (which scripts)
    2. webperf-loading:First-And-Third-Party-Script-Info.js (third-party involvement)
  • If Presentation Delay > 50ms → Rendering bottleneck, run:
    1. Long-Animation-Frames.js (frame rendering time)
    2. Layout-Shift-Loading-and-Interaction.js (check for layout work)
  • 如果输入延迟>50ms → 主线程繁忙，运行：
    1. Long-Animation-Frames.js（阻塞源）
    2. LongTask.js（交互前的长任务）
  • 如果处理时间>100ms → 事件处理程序过重，运行：
    1. Long-Animation-Frames-Script-Attribution.js（具体脚本）
    2. webperf-loading:First-And-Third-Party-Script-Info.js（第三方脚本参与情况）
  • 如果呈现延迟>50ms → 渲染瓶颈，运行：
    1. Long-Animation-Frames.js（帧渲染时间）
    2. Layout-Shift-Loading-and-Interaction.js（检查布局工作）

After Long-Animation-Frames.js

运行Long-Animation-Frames.js之后

  • If many frames > 50ms → Run Long-Animation-Frames-Script-Attribution.js to identify causes
  • If frames > 100ms → Critical blocking, run:
    1. Long-Animation-Frames-Script-Attribution.js (detailed attribution)
    2. LongTask.js (related long tasks)
    3. webperf-loading:JS-Execution-Time-Breakdown.js (script execution cost)
  • If frames occur during scroll → Run Scroll-Performance.js to measure impact
  • If frames occur during page load → Cross-check with webperf-loading:Event-Processing-Time.js
  • 如果存在多个时长>50ms的帧 → 运行Long-Animation-Frames-Script-Attribution.js定位原因
  • 如果帧时长>100ms → 严重阻塞，运行：
    1. Long-Animation-Frames-Script-Attribution.js（详细归因）
    2. LongTask.js（相关长任务）
    3. webperf-loading:JS-Execution-Time-Breakdown.js（脚本执行成本）
  • 如果帧出现在滚动期间 → 运行Scroll-Performance.js测量影响
  • 如果帧出现在页面加载期间 → 与webperf-loading:Event-Processing-Time.js交叉检查

After Long-Animation-Frames-Script-Attribution.js

运行Long-Animation-Frames-Script-Attribution.js之后

  • If third-party scripts are causing long frames → Run:
    1. webperf-loading:First-And-Third-Party-Script-Info.js (list all third-party scripts)
    2. webperf-loading:Script-Loading.js (check loading strategy)
    3. Recommend deferring or removing problematic scripts
  • If first-party scripts are causing long frames → Recommend:
    • Code splitting
    • Debouncing/throttling event handlers
    • Web Workers for heavy computation
  • If forced reflow/layout detected → Analyze DOM manipulation patterns
  • 如果第三方脚本导致长帧 → 运行：
    1. webperf-loading:First-And-Third-Party-Script-Info.js（列出所有第三方脚本）
    2. webperf-loading:Script-Loading.js（检查加载策略）
    3. 建议延迟加载或移除有问题的脚本
  • 如果第一方脚本导致长帧 → 建议：
    • 代码分割
    • 事件处理程序防抖/节流
    • 使用Web Workers处理繁重计算
  • 如果检测到强制重排/布局 → 分析DOM操作模式

After LongTask.js

运行LongTask.js之后

  • If many long tasks (>5) → Main thread is congested, run:
    1. Long-Animation-Frames-Script-Attribution.js (detailed attribution)
    2. webperf-loading:JS-Execution-Time-Breakdown.js (script execution analysis)
    3. webperf-loading:First-And-Third-Party-Script-Info.js (identify heavy scripts)
  • If long tasks > 500ms → Critical blocking, investigate:
    • Synchronous third-party scripts
    • Heavy computation without Web Workers
    • Excessive DOM manipulation
  • If long tasks correlate with interactions → Run Interactions.js to see impact
  • 如果存在多个长任务（>5个） → 主线程拥堵，运行：
    1. Long-Animation-Frames-Script-Attribution.js（详细归因）
    2. webperf-loading:JS-Execution-Time-Breakdown.js（脚本执行分析）
    3. webperf-loading:First-And-Third-Party-Script-Info.js（识别重型脚本）
  • 如果长任务时长>500ms → 严重阻塞，排查：
    • 同步第三方脚本
    • 未使用Web Workers的繁重计算
    • 过度DOM操作
  • 如果长任务与交互相关 → 运行Interactions.js查看影响

After Scroll-Performance.js

运行Scroll-Performance.js之后

  • If scroll FPS < 30 → Severe jank, run:
    1. Long-Animation-Frames.js (blocking frames during scroll)
    2. Long-Animation-Frames-Script-Attribution.js (scripts running on scroll)
    3. Layout-Shift-Loading-and-Interaction.js (layout work during scroll)
  • If scroll FPS 30-50 → Noticeable jank, investigate:
    • Scroll event handlers
    • Passive event listeners
    • CSS will-change properties
  • If scroll FPS > 50 → Good, but check for layout shifts during scroll
  • 如果滚动FPS<30 → 严重卡顿，运行：
    1. Long-Animation-Frames.js（滚动期间的阻塞帧）
    2. Long-Animation-Frames-Script-Attribution.js（滚动期间运行的脚本）
    3. Layout-Shift-Loading-and-Interaction.js（滚动期间的布局工作）
  • 如果滚动FPS在30-50之间 → 明显卡顿，排查：
    • 滚动事件处理程序
    • 被动事件监听器
    • CSS will-change属性
  • 如果滚动FPS>50 → 状态良好，但需检查滚动期间的布局偏移

After Layout-Shift-Loading-and-Interaction.js

运行Layout-Shift-Loading-and-Interaction.js之后

  • If shifts occur during page load → Cross-reference with webperf-core-web-vitals:CLS.js
  • If shifts occur during interaction → This impacts INP and UX, investigate:
    1. Dynamic content insertion
    2. Images/ads loading without dimensions
    3. Font swaps (run webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js)
  • If shifts occur during scroll → Run Scroll-Performance.js to measure impact
  • 如果偏移发生在页面加载期间 → 与webperf-core-web-vitals:CLS.js交叉引用
  • 如果偏移发生在交互期间 → 这会影响INP和用户体验，排查：
    1. 动态内容插入
    2. 未设置尺寸的图片/广告加载
    3. 字体替换（运行webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js）
  • 如果偏移发生在滚动期间 → 运行Scroll-Performance.js测量影响

After Long-Animation-Frames-Helpers.js

运行Long-Animation-Frames-Helpers.js之后

This is a utility snippet, use results to:
  • Understand frame timing in detail
  • Identify precise script attribution
  • Measure style/layout/paint phases
  • No automatic follow-up, use data to inform next steps
这是一个实用工具代码片段，使用其结果来：
  • 详细了解帧计时
  • 识别精确的脚本归因
  • 测量样式/布局/绘制阶段
  • 无自动后续步骤，根据数据决定下一步操作

Performance Budget Thresholds

性能预算阈值

Use these thresholds to automatically trigger follow-up analysis:
INP Thresholds:
  • Good: ≤ 200ms → Monitor, no action needed
  • Needs Improvement: 200-500ms → Run Input-Latency-Breakdown.js
  • Poor: > 500ms → Run full INP debugging workflow (5 snippets)
Long Animation Frames:
  • Warning: > 50ms → Run Long-Animation-Frames-Script-Attribution.js
  • Critical: > 100ms → Run full main thread blocking workflow
Long Tasks:
  • Warning: > 50ms → Monitor frequency
  • Critical: > 200ms or >5 tasks per second → Run attribution and script analysis
Scroll Performance:
  • Good: ≥ 50 FPS → Monitor
  • Needs Improvement: 30-50 FPS → Run Long-Animation-Frames.js
  • Poor: < 30 FPS → Run full scroll jank workflow
Interaction Frequency:
  • If >10 interactions/second → User is actively interacting, prioritize INP optimization
  • If <1 interaction/5 seconds → Interactions are rare, focus on first interaction responsiveness
使用这些阈值自动触发后续分析：
INP阈值：
  • 良好：≤200ms → 监控，无需操作
  • 需要改进：200-500ms → 运行Input-Latency-Breakdown.js
  • 较差：>500ms → 运行完整INP调试工作流（5个代码片段）
长动画帧阈值：
  • 警告：>50ms → 运行Long-Animation-Frames-Script-Attribution.js
  • 严重：>100ms → 运行完整主线程阻塞工作流
长任务阈值：
  • 警告：>50ms → 监控发生频率
  • 严重：>200ms 或 每秒>5个任务 → 运行归因和脚本分析
滚动性能阈值：
  • 良好：≥50 FPS → 监控
  • 需要改进：30-50 FPS → 运行Long-Animation-Frames.js
  • 较差：<30 FPS → 运行完整滚动卡顿工作流
交互频率：
  • 如果>10次交互/秒 → 用户正在频繁交互，优先优化INP
  • 如果<1次交互/5秒 → 交互稀少，聚焦首次交互响应速度

Multi-Metric Correlation

多指标关联

When multiple interaction metrics are poor:
  • If Long Tasks AND Long Animation Frames both detected → Shared root cause:
    1. Run Long-Animation-Frames-Script-Attribution.js
    2. Likely heavy JavaScript execution
    3. Consider code splitting or Web Workers
  • If INP slow AND CLS high → Interaction-triggered layout shifts:
    1. Run Layout-Shift-Loading-and-Interaction.js
    2. Correlate shift timing with interaction timing
    3. Check for dynamic content insertion
  • If Scroll jank AND Long Animation Frames → Scroll handlers blocking main thread:
    1. Run Long-Animation-Frames-Script-Attribution.js during scroll
    2. Check for non-passive scroll listeners
    3. Audit scroll-triggered animations
当多个交互指标表现较差时：
  • 如果同时检测到长任务和长动画帧 → 共同根因：
    1. 运行Long-Animation-Frames-Script-Attribution.js
    2. 可能是JavaScript执行过重
    3. 考虑代码分割或使用Web Workers
  • 如果INP缓慢且CLS较高 → 交互触发的布局偏移：
    1. 运行Layout-Shift-Loading-and-Interaction.js
    2. 将偏移计时与交互计时关联
    3. 检查动态内容插入
  • 如果滚动卡顿且存在长动画帧 → 滚动处理程序阻塞主线程：
    1. 在滚动期间运行Long-Animation-Frames-Script-Attribution.js
    2. 检查非被动滚动监听器
    3. 审计滚动触发的动画

References

参考资料

  • references/snippets.md
    — Descriptions and thresholds for each script
  • references/schema.md
    — Return value schema for interpreting script output
  • references/snippets.md
    — 每个代码片段的说明和阈值
  • references/schema.md
    — 用于解析代码片段输出的返回值架构