What is React.js

Introduction to Web Workers

For websites and web applications, we rely on Javascript to handle logic, interacting with existing HTML and CSS on the page, and even use it to create and add DOM content on styles on our website. Javascript is essential in any developers toolset.





However, as time has gone on, web applications have become more complex. Applications that would've been previously built natively on desktop are now available on the web.



But many applications are now a lot more complex than they were back then. We have single page web applications now that handle multiple pages of content without ever having to refresh the page or go to a different url in the browser. 



Even applications that are still one single page need plenty of complex Javascript for handling the business logic of their page.



As we continue to add more Javascript to our pages, our site needs to handle our Javascript and this could harm the user experience and the performance of a page.



<h2>Javascript by default runs on the main thread</h2>



Javascript that we run on the page by default runs on the main thread. Not just in web applications but also in other applications any code relating to the UI interface is run on the main thread. Why is that important? Because if the main thread is blocked, the user won't be able to interact with the page



<h2>But wait, isn't Javascript asynchronous?</h2>



Javascript is known by many as an asynchronous, non blocking programming language. However there are only certain tasks in Javascript that can be non blocking, such as fetching a request, or running code wrapped in a setTimeout or setInterval function. 



The following lines of code



<pre class="wp-block-code"><code>const some_number = 4;

console.log("Hello");

for(let i = 0; i &lt; some_number; i++) {
 console.log(i);
}</code></pre>



Are synchronous, blocking Javascript. Theres no possibility where the for loop can happen before the declaration of the some_number variable 



However, if we wrap the console.log statement that prints out hello world in a setTimeout with a timeout of 1000ms, you would see that the "Hello" would print to the console after the for loop. setTimeout allowed us to run code that did not block the for loop printing out numbers to the console from running. Since both actions occurred on the same thread the main thread, the console log inside the setTimeout and the for loop do not run at the same time.



<h2>Running Javascript in multiple threads</h2>



To run different pieces of Javascript code at the same time we can run Web Workers! Web workers allow us to run Javascript to run in different threads on our CPU.

What are Web Workers in Javascript

How to create a Web worker

What are AVIF images

To start, create a webpage using web workers, the first thing we want to do is create a small webpage containing an HTML file and two Javascript files.



The first Javascript file should be named script.js and the second file should be named worker.js



The HTML file should contain the following markup



<pre class="wp-block-code"><code>&lt;div id="container"&gt;&lt;/div&gt;
&lt;script src="./script.js"&gt;&lt;/script&gt;</code></pre>



In your script.js file, initialize a worker instance that takes in the location of the script we want to run inside a Web Worker. 



<pre class="wp-block-code"><code>const myWorker = new Worker('worker.js');</code></pre>



Next, we want to go to our worker.js file and add some code that will run on the main thread. I am going to just add a variable. 



<pre class="wp-block-code"><code>const a = 2;</code></pre>



<h2 id="postmessage">Use postmessage to send data from the Webworker back to the main thread</h2>



Now that we have declared our variable inside our Web Worker, we want to send the data (our variable) inside it back to the main thread



<pre class="wp-block-code"><code>const a = 2;

postMessage(a);</code></pre>



We now need to add the handler that will run when postmessage is called. To do this, we need to set the onmessage property of our worker to a function that can be used to get back the data passed in the postMessage parameter in our Web worker.



Go back to the script.js file and set the onmessage attribute to be the following function here



<pre class="wp-block-code"><code>myWorker.onmessage = function(e) {
}</code></pre>



To get the data from our Web Worker we would call e.data. Lets set the HTML of our container div element to be the value from the variable inside our Web Worker



<pre class="wp-block-code"><code>myWorker.onmessage = function(e) {
 document.getElementById('container').innerHTML = e.data;
}</code></pre>

Tutorials, articles and quizzes on Software Development

More Articles