HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Web Workers API

JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time.

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A Web Workers is a simple means for web content to run JavaScript in background threads.

The worker thread can perform tasks without interfering with the user interface.

You can continue to do whatever you want such as clicking, selecting, etc., while the web worker runs in the background.


Browser compatibility

The numbers in the table specify the first browser version that fully supports the Web Workers API:

API
Web Workers 4 3.5 11.5 4 10

HTML Web Workers Example

This example creates a simple web worker that count numbers in the background:

Counter:

Run code

It may seem complicated, but don't worry the following section provides a summary of the basic steps to use Web Workers functionality to an application. Each section includes a description of the step, a short code example.


Checking for Browser Support

Before using web workers, you must check whether user's browser supports it:



Create a Web Worker File

First create a web worker in an external JavaScript.

Here, we create a script that counts. The script is stored in the "my_worker.js" file:

The postMessage() method is used to post a message back to the HTML page.

Typically web workers are not used for such simple scripts, but for more CPU intensive tasks.


Create a Web Worker Object

Creating a new worker is simple. All you need to do is call the Worker() constructor.

The Worker() constructor specifies the URL of a script to execute in the worker thread ("my_worker.js").

Then we can send and receive messages from the web worker.

When the web worker posts a message using postMessage() method, the code within the onmessage event listener is executed.

The onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute.


Stopping Web Workers

Web Workers don't stop by themselves but the page that started them can stop them by calling terminate() method.

A terminated Web Worker will no longer respond to messages or perform any additional computations.

You cannot restart a worker; instead, you can create a new worker using the same URL.


Handling Errors

When a runtime error occurs in the worker, its onerror event handler is called.

Run code