• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Web Workers

← Previous Next →

Web Workers allow you to run JavaScript scripts in background threads separate from the main execution thread of a web page. This helps in performing heavy computations without freezing or slowing down the user interface.

🔹 Why Use Web Workers?

  • Perform CPU-intensive tasks without blocking the UI

  • Improve responsiveness and user experience

  • Run multiple scripts in parallel

🔹 Creating a Web Worker

You create a Web Worker by specifying a JavaScript file that runs in the background.

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

worker.postMessage('Hello Worker');

worker.onmessage = function(event) {
  console.log('Message from worker:', event.data);
};
Example: worker.js
onmessage = function(event) {
  const result = event.data + ' - processed in worker';
  postMessage(result);
};

🔹 Communication between Main Thread and Worker

  • Main thread → Worker: Use worker.postMessage(data)

  • Worker → Main thread: Use postMessage(data)

  • Listening for messages: Use onmessage event handler

🔹 Terminating a Worker

To stop a worker when it’s no longer needed:

worker.terminate();

💻 Example: Simple Worker Usage

index.html

<button id="start">Start Worker</button>
<p id="output"></p>

<script>
  const worker = new Worker('worker.js');

  worker.onmessage = function(e) {
    document.getElementById('output').innerText = e.data;
  };

  document.getElementById('start').onclick = function() {
    worker.postMessage('Start processing');
  };
</script>

worker.js

onmessage = function(e) {
  // Perform a heavy calculation (simulate with loop)
  let count = 0;
  for(let i = 0; i < 1e7; i++) {
    count += i;
  }
  postMessage('Processing done: ' + count);
};

Practice Questions

Q1. Create a Web Worker that calculates the sum of numbers from 1 to 1,000,000 without blocking UI.

Q2. Send a message from main script to worker and display the response.

Q3. Terminate the Web Worker after the task is completed.

Q4. Create a worker to perform factorial calculation of a given number.

Q5. Implement error handling in Web Worker using onerror.

Q6. Pass an array to the worker and receive the squared values array.

Q7. Create multiple workers to run parallel computations.

Q8. Use worker.terminate() to stop workers on button click.

Q9. Use postMessage() to send complex data objects between main script and worker.

Q10. Demonstrate how Web Workers improve UI responsiveness by comparing with synchronous code.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top