了解Chrome时间轴中的滚动交互

Question

这不是关于我的特定问题的问题，而是关于我无法找到文档的Chrome性能时间表中的某些问题的问题，具体是：滚动交互事件。

背景：我正在对视差动画进行故障排除，该视差动画具有断断续续的混乱感。它使用滚动处理程序来收集一些信息，并使用requestAnimationFrame来更新样式。时间轴的“交互”部分有一个清晰的模式，分别是“简陋”框架与“非简陋”框架，但是我不知道这些时间轴事件代表什么。

这是一个肮脏的框架：

这是一个光滑的框架：

我进行视觉更改的JS代码在requestAnimationFrame上触发。我的要点：

• 当该代码直接与帧的开头对齐时发出刺耳的声音，但当它向着帧的结尾对齐时发出刺耳的声音（这似乎与requestAnimationFrame的含义矛盾？）
• 当Latency::ScrollUpdate事件继续到“滚动更新”事件结束时，它会发出声音。 （据我所知，Latency::ScrollUpdate与滚动事件处理程序的存在有关。）这似乎是问题的症结所在，这种情况意味着什么？

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

• 滚动：顶部的紫色细线
• 滚动更新：紫色的“呈现”事件
• 延迟：: ScrollUpdate ：灰色的“系统”事件