<img height="1" width="1" src="https://www.facebook.com/tr?id=237450086700255&amp;ev=PageView&amp;noscript=1">

Are you in, or out? In-housing in 2020 and beyond

Join us on 22nd October at 3pm BST (10am EDT) for a virtual panel discussion with leading industry experts, on the future of in-housing and beyond.

How can web workers improve efficiency on JavaScript?

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.

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.

Related Post:

How we can make JavaScript better

In our previous article, we highlighted what issues JavaScript can cause when loading a page. We already touched the sub...

Digital Darwinism and tech maturity

Following the recent pandemic, brands are quickly re-evaluating their marketing strategy and investments, with most of t...

Start your free trial of Serpico's paid search audit

Serpico’s PPC audit tool tells you how to improve the health and performance of your Google Ads account and alerts you when things go wrong. Start your 7-day free trial today.

Start your free trial

Serpico audit on laptop