DevTools timeline panel
We will use the Timeline panel to debug some paint issues in the example site page contained in this folder.
- Open the example-site/index.html page in your browser
- Open up the browsers JS console alt + ctrl + j
- Open the Timeline panel and go the Frames view.
- Click the Record button in the Timeline.
- After after a second or two (10-12 frames recorded) stop the recording
Now you have enough data to analyse and dive deep into each frame to determine what could be the issue.
Look for warning symbols which may suggest forced layout.
Remember accessing an elements geometry forces the browser to reflow and marks it as dirty.
Why not try throttling or debouncing the function bound to the scroll event.
3.1.4 requestAnimationFrame Advanced
Although we have refactored the bound function to the scroll event to have a jankTM free animation. We could go one step further and allow the browser to dictate when the animation happens
Try changing the scroll handler to use
window.requestAnimationFrame. Good documentation can be found here: