3.1.1 Analyse


The devtools Timeline panel lets you record and analyse the frame-by-frame activity on your page during runtime. It's the best place to start investigating perceived performance issues, especially those related to JavaScript and paint.

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.

Hint:

Try and use the "records" panel to determine which JavaScript file may be triggering the problems.

Look for warning symbols which may suggest forced layout.

3.1.2 TimeStamp


You can quite easily lose track of all of the records being output to the Timeline, especially if you have multiple JavaScripts running on the page in parallel.

Once you have located an issue with a specific bit of JavaScript you can use the consoles built in timestamping method to place a marker in the Timeline for quick reference.

Try adding console.timeStamp('My marker'); to your JavaScript function and re-record the timeline.

3.1.3 Refactor


Now that we have isolated the JavaScript function that is causing the forced layout we can try to refactor it to prevent forced layout.

Remember accessing an elements geometry forces the browser to reflow and marks it as dirty.

Tip:

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: https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame