Multithread Processing

The main thread is responsible for a lot of things, such as layout and paint (in terms of UI) and also evaluating JavaScript. We want to keep this to a minimum to free up the main thread for our application to perform other tasks that do require the main thread.

How to check thread activity

We can use Chrome’s and Safari’s developer tools to test this metric, with each tool giving us a different but equally useful insight into it.

Chrome devtools

Let’s start with Chrome DevTools. We can use the performance tab similar to the previous section, but instead of focusing on the frames, we’ll highlight the section of the timeline that has the animation and select the “main” option from the sidebar. This will show the main thread usage over this period.

As we can see in the image below, Chrome DevTools gives us the percentages and milliseconds of each of the processes that the main thread is running. The goal here is to keep painting and rendering to be at a minimum, and the main thread to be mostly idle during the animation duration. This will make sure that our animation code doesn’t interfere with other processes that are running on the main thread, which could cause the animation to drop frames or stutter.