JavaScript is an object-based scripting language which is lightweight and cross-platform. It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document.
Even though js had so many advantages, it is having some drawbacks. It is Single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next.
To resolve the above one,we can use Web worker.
A web worker is a JavaScript code that runs in the background and does not influence the page’s performance.
Web Workers are background scripts and they are relatively heavy-weight, and are not intended to be used in large numbers. Although Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsive.
In HTML5 Web Workers are of two types:
Dedicated Web Workers:
The dedicated worker can be accessed by only one script which has called it. The dedicated worker thread end as its parent thread ends. Dedicated workers are only used by one or single main thread.
Shared Web Workers:
It can be shared by multiple scripts and can communicate using the port. Shared workers can be accessed by different windows, iframes or workers.
Common examples of web workers would be:
1)Dashboard pages that display real-time data such as stock prices, real-time active users, and so on
2)Fetching huge files from the server
3)Autosave functionality
You can create a web worker using the following syntax:
const worker = new Worker(".js");
Worker is an API interface that lets you create a thread in the background. We need to pass a parameter, that is a .js file. This specifies the worker file the API needs to execute.
A worker can be shared or used by multiple consumers/scripts. These are called shared workers. The syntax of the shared worker is very similar to that of the above mentioned workers.
const worker = new SharedWorker(".js");
Terminating the Web Worker:
If you want to immediately terminate the currently running worker in the main thread, then you can terminate it by calling the terminate() method of Web Worker. Here is the syntax for web worker termination:
worker.terminate();
Worker Example:
<!DOCTYPE html>
<html>
<head>
<style>
.div1{
margin-left: 350px;
}
</style>
</head>
<body>
<div class="div1">
<h2>Example of Web Worker</h2>
<label>Enter the number to find the square</label>
<br><input type="text" name="num" id="num"><br>
<br><button id="submit">Submit</button>
<button id="other">Wait</button>
<div id="text"></div>
</div>
<script type="text/javascript">
document.getElementById("other").onclick=function() {
alert("Hey! Web Worker is working, and you can wait for the result.");
}
//Web-worker Code
var worker= new Worker("worker.js");
worker.onmessage= function(event){
document.getElementById("text").innerText= event.data;}
document.getElementById("submit").onclick= function(){
var num= document.getElementById("num").value;
worker.postMessage(num);
}
</script>
<p>
</body>
</html> - var worker= new Worker("worker.js"); To create the web Worker object.
- worker.onmessage= function(event): It is used to send the message between the main thread and Worker thread.
- worker.postMessage(num); This is the method used to communicate between the Worker thread and main thread. Using this method Worker thread return the result to the main thread.
Note: Use the below link to test whether your browser is compatible with html5 feature.
