Explain Web Worker in HTML
Last Updated :
25 Jul, 2024
HTML is a Markup language that is used to design web pages and JavaScript is a programming language that enables dynamic interactivity on websites when it is applied to an HTML. It helps users to build modern web applications.
But the problem with this JavaScript was designed to run in a single-threaded environment, so multiple scripts cannot run at the same time also when executing Javascript scripts on an HTML page, the page becomes unresponsive until the script is finished.
So, To overcome this Web worker comes into the picture. The Web Workers is a separate piece of JavaScript code that runs in the background of the web page without affecting it.
What is a Web Worker?
Web workers are multithreaded objects that are used to execute Javascript in the background without affecting the performance of the application or webpage. Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allow long tasks to be executed without affecting the responsiveness of the web page. Generally, it is used for big CPU-intensive tasks.
Types of Web Workers
Web Workers provide a way to run scripts in the background, separate from the main thread of your web page. They allow you to perform tasks without interfering with the user interface. Here are the two main types of Web Workers:
1. Dedicated Workers:
- A dedicated worker is accessible only by the script that spawned it.
- It runs in its own thread, isolated from the main thread.
- Useful for scenarios where you want to offload heavy computations or time-consuming tasks without affecting the responsiveness of your web page.
- Dedicated workers are typically used within a single script.
2. Shared Workers:
- A shared worker can be accessed by multiple scripts running in different windows, iframes, or other contexts, as long as they are in the same domain.
- Shared workers are designed for scenarios where you need to share data or coordinate actions across different parts of your application.
- They provide a way to communicate and collaborate between different tabs or frames.
- Shared workers are more versatile and can be utilized by various scripts simultaneously.
Syntax for Creating a Web Worker
It is used to create a web worker
worker = new Worker("webWorker.js");
Syntax for Terminating a Web Worker
It is used to terminate a web worker.
worker.terminate();
Example of Web Worker
Step 1: Create a Javascript file for Web Worker and the code which you want to run in the background. Here we are creating a webWorker.js file and using it to count from 1 in the background and show that to our web page and in the frontend, we will use the alert box.
Step 2: Now create an index.html and add the following codes to that file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Worker</title>
</head>
<body>
<p>Web Worker is Counting Numbers</p>
<p>Counting: <output id="countM"></output></p>
<button onclick="alertMessage()">
Alert On
</button>
<script>
// This is function to run alert
function alertMessage() {
alert("Web Worker is Running in Background");
}
// Created a web worker and passed script which
// needs to execute in background
var worker = new Worker("webWorkers.js");
// Called onmessage method to get value from
// script file and show it on web page
worker.onmessage = function (event) {
document.getElementById("countM")
.innerHTML = event.data;
};
</script>
</body>
</html>
// Initialized a variable with 0
var count = 0;
function timedCount() {
count = count + 1;
// It is used to send value
// back to html page
postMessage(count);
// It is a timeout function
setTimeout("timedCount()", 1000);
}
timedCount();
Output: In this program, Web Worker is counting numbers in the background and still, we can use our web page like here we have used the alert box.
Supported Browsers:
- Google Chrome 4.0
- Firefox 3.5
- Microsoft Edge 10.0
- Safari 4.0
- Opera 11.5
Note: Chrome doesn't let you load Web Workers when running scripts from a local file. So, for this use, a web host or you can use live server extension.
Similar Reads
Explain the Concepts of Service Workers in PWAs Before diving into service workers, it is required to understand the basics of PWAs. PWAs are web applications that control modern web technologies to offer users with a native app-like experience instantly through a web browser. An important factor of this technology is the service worker, who play
4 min read
Explain various type of HTML DOM methods There are some instances in which the HTML markup needs to be dynamically manipulated without actually changing the HTML source code. To achieve this, users can make use of a variety of HTML DOM methods present in JavaScript at their disposal. First, it is important to understand what the HTML Docum
6 min read
Explain the Web Browser? A web browser works to provide an interface to the vast resources available on the Internet, a web browser acts as a mediator between the user and the websites, web-based programs, contents such as audio-visuals, and other online tools, the main utility of a browser is to fetch web resources from th
10 min read
Introduction to Angular Service Worker A Service Worker is a script that acts as the proxy to the browser network, to enable offline or low connectivity applications. The service worker is available in the form of the @angular/service-worker package that allows to easily integrate service workers into the Angular application.The Angular
5 min read
HTML Parsing and Processing The word parsing means to divide something into its components and then describe their syntactic roles. The word processing is familiar and stands for dealing with something using a standard procedure. Combined these two explain how HTML parser works in generating DOM trees from text/html resources.
5 min read