This is less a question about my specific problem than a question about some things in the Chrome performance timeline that I can't find documentation for, specifically: scroll interaction events.
Background: I'm troubleshooting a parallax animation that has some on-and-off jankiness. It uses a scroll handler to gather some information, and requestAnimationFrame to update styles. There's a clear pattern in the "Interaction" part of the timeline for "janky" vs. "not janky" frames, but I have little idea what these timeline events represent.
Here's a janky frame:
Here's a smooth frame:
My JS code to make visual changes is triggered on requestAnimationFrame. My takeaways:
- It janks when that code aligns directly with the start of the frame, but not when it's towards the end of a frame (which seems to contradict what
requestAnimationFrameis about?) - It janks when the
Latency::ScrollUpdateevent continues past the end of the "Scroll Update" event. (As far as I can tell,Latency::ScrollUpdateis related to the presence of the scroll event handler.) This seems to be the crux of the issue—what does this situation mean?
What do the following "Interactions" events represent?
- Scroll: thin purple line at top
- Scroll Update: purple "Rendering" event
- Latency::ScrollUpdate: gray "System" event