Home / Topic / What's New in HTML5 / Web Workers API

What's New in HTML5

Web Workers API

The Web Workers API in HTML5 allows scripts to run in the background in parallel with the browser's main execution thread. This means you can perform computationally intensive tasks without blocking the user interface, significantly improving performance and the user experience in web applications.

What are Web Workers?

Web Workers are background scripts that the browser runs separately from the main thread of the page. This allows heavy operations to not block the user interface thread, keeping the page responsive to the user.

Types of Web Workers

Dedicated Workers: These are specific to a single page and cannot be shared between multiple scripts.
Shared Workers: These can be accessed by multiple scripts and pages, allowing communication between different windows and tabs of the same application.

Creating a Dedicated Worker

To create and use a Dedicated Worker, you first need a JavaScript file that will act as the "worker". Here’s how to do it:

Worker Code (worker.js)

javascript
9
1
2
3
4
5
6
›
⌄
// worker.js
onmessage = function(e) {
    console.log('Message received from the main script:', e.data);
    var result = e.data * 2; // Perform some operation
    postMessage(result); // Send the result back to the main script
};

Main Script Code (index.html)

html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
›
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Workers API - Basic Example</title>
    <script>
        var worker;

        function startWorker() {
            if (typeof(Worker) !== "undefined") {
                worker = new Worker("worker.js");
                worker.onmessage = function(event) {
                    document.getElementById("result").innerHTML = "Result: " + event.data;
                };
                worker.postMessage(10); // Send a message to the Web Worker
            } else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
            }
        }

        function stopWorker() {
            worker.terminate();
            worker = undefined;
        }
    </script>
</head>
<body>
    <h1>Web Workers API</h1>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <div id="result"></div>
</body>
</html>

[Placeholder Image: Diagram showing communication between the main script and a Web Worker, indicating message sending and receiving]

Communicating with Web Workers

Communication between the main script and Web Workers is achieved through the postMessage() method and the onmessage event.

Sending Messages to the Worker

Use the postMessage() method to send data to the Worker:

javascript
9
1
›
worker.postMessage("Hello Worker");

Receiving Messages from the Worker

Capture messages from the Worker by handling the onmessage event:

javascript
9
1
2
3
›
⌄
worker.onmessage = function(event) {
    console.log('Message received from the Worker:', event.data);
};

Using Shared Workers

Shared Workers allow multiple scripts and windows to access them simultaneously. Here’s how to use them:

Shared Worker Code (sharedWorker.js)

javascript
9
1
2
3
4
5
6
7
8
9
›
⌄
⌄
// sharedWorker.js
onconnect = function(e) {
    var port = e.ports[0];
    port.onmessage = function(event) {
        console.log('Message received from the main script:', event.data);
        var result = event.data * 2; // Perform some operation
        port.postMessage(result); // Send the result back to the main script
    };
};

Main Script Code (index.html)

html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
›
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shared Web Workers API - Example</title>
    <script>
        var sharedWorker;

        function startSharedWorker() {
            if (typeof(SharedWorker) !== "undefined") {
                sharedWorker = new SharedWorker("sharedWorker.js");
                sharedWorker.port.onmessage = function(event) {
                    document.getElementById("result").innerHTML = "Result: " + event.data;
                };
                sharedWorker.port.postMessage(20); // Send a message to the Shared Worker
            } else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support Shared Web Workers...";
            }
        }
    </script>
</head>
<body>
    <h1>Shared Web Workers API</h1>
    <button onclick="startSharedWorker()">Start Shared Worker</button>
    <div id="result"></div>
</body>
</html>

[Placeholder Image: Diagram showing communication between multiple windows and a Shared Worker]

Security Considerations

Limited Scope: Web Workers cannot directly manipulate the DOM. This ensures that heavy operations do not affect the user interface.
Cross-Origin Policies: Web Workers adhere to the same cross-origin policies that apply to the XMLHttpRequest object.
Data Security: Ensure that you validate and sanitize data transferred between the main script and Web Workers.

Practical Applications of Web Workers

Data Processing: Process large volumes of data without blocking the user interface.
Complex Calculations: Execute complex mathematical calculations or simulations.
File Handling: Manipulate large data files in the background.

Conclusion

The Web Workers API provides an efficient way to perform background tasks without affecting user interface performance. By using Dedicated Workers and Shared Workers, you can create faster and more responsive web applications, thereby improving the user experience.

Back to previous chapter

Mark as read and continue

Support Chuck’s Academy!

Enjoying this course? I put a lot of effort into making programming education free and accessible. If you found this helpful, consider buying me a coffee to support future lessons. Every contribution helps keep this academy running! ☕🚀

Chat with Chuck

Chat with Chuck AI