With JavaScript and the main thread high on the agenda at the Google Chrome Developer Summit held earlier this year, we’re exploring why the main thread is so important and how we can use it to make JavaScript better.
The main thread
When a browser loads a page, it uses the device’s processing power. This processing is done through the so-called main thread and most major browsers only use a single main thread. The main thread does everything: digests the source code, styling, responds to user events (such as users clicking on links) and ‘paints’ (renders) the page. All of this is done through the main thread – so as you can see, it’s pretty important.
Because the main thread is so busy, any additional work it is given can have a negative impact on the performance of the page. Especially when a page has a lot of JavaScript, the main thread will become occupied and won’t be able to do its core task – which is to render the page and provide users with a smooth experience. As the processing power of a browser is dependent on the overall processing power of the device, it is terribly difficult and almost impossible to predict the impact of JavaScript on the performance.
Think of it this way: As long as the page is busy with JavaScript, it won’t be able to show the page properly, or when it is busy rendering the page, it won’t be able to execute the JavaScript. The tasks processed by the browser’s main thread are all asynchronous.
So it’s fair to say that the single main thread is massively overworked. It has to digest and execute the HTML code and styling instructions, as well as evaluate and execute all the JavaScript. As this process is asynchronous, heavy JavaScript can potentially block the process of showing the page to its users. So how can you use the main thread to make JavaScript work more efficiently?
Opportunities
To understand opportunities, we need to focus in on what the relationship between the main thread and JavaScript is. The main thread is the only thread that can read and alter the source code. So if you want JavaScript to change anything within the source code (Document Object Model, DOM), you will have to do this over the main thread. Any other JavaScript functionality, such as retrieval of data, sending data or even doing complex calculations, can be done by so-called ‘web workers’ using a different thread, which is parallel to the main thread.
When developing JavaScript functionalities for a website, we must consider installing a web worker, to ensure that the functions do not alter or manipulate the source code. This is done by a parallel thread, which frees up the main thread of the browser, so it can continue to work on showing and maintaining a smooth experience to its users.
This will become more and more important over time, as websites become more complex and low-end smartphones devices are on the increase.
Final thoughts
So when you are developing JavaScript functionalities for a website, you will have to ask yourself:
- What can I move onto a separate thread to free up the main thread?
- How can I provide my users with the smoothest and best possible experience?
To find out more about our Technical SEO services, or about our subsidiary brand Serpico by Croud, get in touch.