Performance 了解Chrome timeline中的滚动交互_Performance_Google Chrome_Animation_Google Chrome Devtools

Performance 了解Chrome timeline中的滚动交互

performance google-chrome animation google-chrome-devtools

Performance 了解Chrome timeline中的滚动交互,performance,google-chrome,animation,google-chrome-devtools,Performance,Google Chrome,Animation,Google Chrome Devtools,这与其说是关于我的具体问题，不如说是关于Chrome性能时间表中一些我找不到文档的问题，特别是：滚动交互事件背景：我正在排除一个视差动画的故障，它有一些开和关的刺耳声音。它使用滚动处理程序收集一些信息，并使用requestAnimationFrame更新样式。“janky”和“not janky”框架在时间轴的“交互”部分有一个清晰的模式，但我不知道这些时间轴事件代表什么这是一个简陋的画面：这是一个平滑的框架：我的JS代码在requestAnimationFrame上触发以进行视觉更

这与其说是关于我的具体问题，不如说是关于Chrome性能时间表中一些我找不到文档的问题，特别是：滚动交互事件

背景：我正在排除一个视差动画的故障，它有一些开和关的刺耳声音。它使用滚动处理程序收集一些信息，并使用

requestAnimationFrame

更新样式。“janky”和“not janky”框架在时间轴的“交互”部分有一个清晰的模式，但我不知道这些时间轴事件代表什么

这是一个简陋的画面：

这是一个平滑的框架：

我的JS代码在

requestAnimationFrame

上触发以进行视觉更改。我的外卖：

当代码直接与帧的开始对齐时，它会发出刺耳的声音，但当代码接近帧的结尾时，它不会发出刺耳的声音（这似乎与
```
requestAnimationFrame
```
的内容相矛盾？）
当
```
Latency:：ScrollUpdate
```
事件持续到“Scroll Update”事件结束后，它会发出刺耳的声音。（据我所知，
```
Latency:：ScrollUpdate
```
与scroll事件处理程序的存在有关。）这似乎是问题的症结所在。这种情况意味着什么

以下“交互”事件代表什么

滚动：顶部细紫色线条
滚动更新：紫色“渲染”事件
延迟：：滚动更新：灰色“系统”事件