Skip to main content
HTML for Beginners
CHAPTER 20 Beginner

HTML Web Workers Basics

Updated: May 10, 2026
5 min read

# HTML Web Workers Basics

1. Introduction

JavaScript is "single-threaded". This means it can only do one thing at a time. If you write a script that does heavy mathematical calculations, the entire webpage will freeze until it finishes! HTML Web Workers solve this by running JavaScript files in the background, completely separate from the main webpage.

2. Learning Objectives

  • Understand why Web Workers are necessary.
  • Create a Web Worker.
  • Send and receive messages between the main page and the worker.

3. Detailed Explanations

The Problem

Imagine a script that counts to 1 billion. If you run this normally, the user can't click buttons or scroll until it finishes. The UI is blocked.

The Solution: Web Workers

A Web Worker runs in the background. It doesn't have access to the DOM (it can't change HTML elements), but it can do heavy math and then send the final answer back to the main page.

Step 1: Create the Worker File

Create a separate JavaScript file named worker.js.
worker.js
1234567891011 
let count = 0;

// A heavy background loop
function timedCount() {
    count++;
    // Send the current count BACK to the main page
    postMessage(count);
    setTimeout("timedCount()", 500);
}

timedCount();

Step 2: Connect the Main Page

In your HTML file, you start the worker and listen for its messages.
html
123456789101112131415161718192021222324252627 
<p>Background Count: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
    // Check if browser supports workers
    if (typeof(Worker) !== "undefined") {
        if (typeof(w) == "undefined") {
            w = new Worker("worker.js");
        }
        // Listen for messages FROM the worker
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Workers not supported.";
    }
}

function stopWorker() {
    w.terminate(); // Kills the worker
    w = undefined;
}
</script>

4. Mini Project: Non-Blocking UI

In modern web dev, you use Web Workers when parsing massive JSON files, doing image processing, or running complex algorithms (like chess AI) so the user's screen remains perfectly smooth and responsive at 60 frames per second.

5. MCQs

Q1: Can a Web Worker directly modify an HTML element (like changing the color of a div)? A) Yes B) No *Answer: B (Workers do not have access to the DOM. They must use postMessage to ask the main script to do it).*

6. Summary

Web Workers bring multi-threading to the browser. While you won't use them for basic websites, they are essential for building complex, high-performance web applications that don't freeze the user interface.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Local Storage and Session Storage
Next Chapter HTML Forms Advanced Concepts

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1