Scribd
Upload
6 views

JavaScript Web Workers

Web Workers enable JavaScript to run in the background, enhancing performance by preventing UI freezing during heavy computations. There are three types of Web Workers: Dedicated Workers for single scripts, Shared Workers for multiple scripts across tabs, and Service Workers for caching and background tasks. The document provides examples of how to create and use each type of worker, including code snippets for worker scripts and main scripts.

Uploaded by

winnibstartupideas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

JavaScript Web Workers

Web Workers enable JavaScript to run in the background, enhancing performance by preventing UI freezing during heavy computations. There are three types of Web Workers: Dedicated Workers for single scripts, Shared Workers for multiple scripts across tabs, and Service Workers for caching and background tasks. The document provides examples of how to create and use each type of worker, including code snippets for worker scripts and main scripts.

Uploaded by

winnibstartupideas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

JavaScript Web Workers

What are Web Workers?


Web Workers allow JavaScript to run in the background, separate from the main UI thread. This helps
improve performance by preventing UI freezing caused by heavy computations.

Types of Web Workers


Dedicated Workers – Used by a single script.
Shared Workers – Can be accessed by multiple scripts in different windows/tabs.
Service Workers – Used for caching, offline support, and background sync.
Using Dedicated Web Workers
A Dedicated Worker is created using the Worker constructor.

Step 1: Create a Worker Script (worker.js)

// worker.js
self.onmessage = function(event) {
console.log("Message received from main thread:", event.data);
let result = event.data * 2; // Example computation
self.postMessage(result);
};
Step 2: Use the Worker in the Main Script

// main.js
const worker = new Worker('worker.js');

worker.postMessage(10); // Sending data to worker

worker.onmessage = function(event) {
console.log("Message from Worker:", event.data);
};

worker.onerror = function(error) {
console.error("Worker error:", error);
};
Terminating a Worker
To stop a worker manually:

worker.terminate();
Inside the worker script, use:

self.close();
Using Shared Workers
Shared workers allow multiple scripts (even across different browser tabs) to share a single worker.

Shared Worker Script (sharedWorker.js)

// sharedWorker.js
self.onconnect = function(event) {
const port = event.ports[0];

port.onmessage = function(event) {
console.log("Shared Worker received:", event.data);
port.postMessage("Hello from Shared Worker");
};
};
Using a Shared Worker in the Main Script
const sharedWorker = new SharedWorker("sharedWorker.js");

sharedWorker.port.start();

sharedWorker.port.postMessage("Hello Worker");

sharedWorker.port.onmessage = function(event) {
console.log("Received from worker:", event.data);
};
Service Workers (For Background Tasks & Caching)
Service Workers handle caching, background sync, and push notifications.

Register a Service Worker

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log("Service Worker registered", reg))
.catch(err => console.error("Service Worker registration failed", err));
}
Service Worker Script (sw.js)

self.addEventListener('install', (event) => {


console.log('Service Worker Installed');
});

self.addEventListener('fetch', (event) => {


console.log('Intercepting request:', event.request.url);
});

You might also like