Using Web Workers - Web APIs | MDN

developer.mozilla.org

MDN | MDN Curriculum | Playground | HTTP Observatory | About MDN | Advertise with us | Community | Blog | MDN Plus | MDN Discord | HTML: Markup language | Elements | Global attributes | Attributes | See all… | Responsive images | HTML cheatsheet | Date & time formats | See all… | SVG | MathML | XML | CSS: Styling language | Properties | Selectors | At-rules | Values | See all…

Tin mới

HTML: Markup language

See all HTML references

Date & time formats

See all HTML guides

CSS: Styling language

See all CSS references

See all CSS guides

Centering an element

JavaScript: Scripting language

Standard built-in objects

Expressions & operators

Statements & declarations

See all JavaScript references

Control flow & error handing

Loops and iteration

Working with objects

See all JavaScript guides

Web APIs: Programming interfaces

Service worker API

Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

All web technology

Progressive web apps

Learn web development

Getting started modules

Structuring content with HTML module

CSS styling basics module

Dynamic scripting with JavaScript module

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

DedicatedWorkerGlobalScope

A worker is an object created using a constructor (e.g., Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is differe

SharedWorkerGlobalScope

A worker is an object created using a constructor (e.g., Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is differe

The Web Workers API landing page

Note: See The Web Workers API landing page for reference documentation on workers and additional guides.

Functions and classes available to workers

A worker is an object created using a constructor (e.g., Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is differe

Spawning a dedicated worker

Creating a new worker is simple. All you need to do is call the Worker() constructor, specifying the URI of a script to execute in the worker thread (main.js):

Sending messages to and from a dedicated worker

The magic of workers happens via the postMessage() method and the onmessage event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

Sending messages to and from a dedicated worker

The magic of workers happens via the postMessage() method and the onmessage event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

Sending messages to and from a dedicated worker

The magic of workers happens via the postMessage() method and the onmessage event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

Terminating a worker

If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's terminate method:

Importing scripts and libraries

Worker threads have access to a global function, importScripts(), which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all the following examples are valid:

Shared worker lifetime

Shared workers are shut down when they are no longer referenced by any windows, iframes, or workers.

content security policy

Workers are considered to have their own execution context, distinct from the document that created them. For this reason they are, in general, not governed by the content security policy of the document (or parent worke

Content security policy

Workers are considered to have their own execution context, distinct from the document that created them. For this reason they are, in general, not governed by the content security policy of the document (or parent worke

Content-Security-Policy

Workers are considered to have their own execution context, distinct from the document that created them. For this reason they are, in general, not governed by the content security policy of the document (or parent worke

structured cloning

Data passed between the main page and workers is copied, not shared (except for certain objects that can be explicitly shared). Objects are serialized as they're handed to the worker, and subsequently, de-serialized on t

Transferring data to and from workers: further details

Data passed between the main page and workers is copied, not shared (except for certain objects that can be explicitly shared). Objects are serialized as they're handed to the worker, and subsequently, de-serialized on t