makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. Web Workers Web Workers concepts and usage A worker is an object created using a constructor (e.g. ) 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 different from the current . Worker() window This context is represented by either a object (in the case of dedicated workers - workers that are utilized by a single script), or a (in the case of shared workers - workers that are shared between multiple scripts). DedicatedWorkerGlobalScope SharedWorkerGlobalScope You can run whatever code you like inside the worker thread, with some exceptions. For example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the object. window But you can use a large number of items available under , including , and data storage mechanisms like . See for more details. window WebSockets IndexedDB Functions and classes available to workers Data is sent between workers and the main thread via a system of messages — both sides send their messages using the method, and respond to messages via the event handler (the message is contained within the event's data property). The is copied rather than shared. postMessage() onmessage Message data Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page.  In addition, workers may use for network I/O, with the exception that the and attributes on always return . XMLHttpRequest responseXML channel XMLHttpRequest null In addition to dedicated workers, there are other types of worker: Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port. See for more details. SharedWorker essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs. ServiceWorkers Chrome Workers are a Firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to in your worker. See for more details. js-ctypes ChromeWorker provide the ability for direct scripted audio processing to be done inside a web worker context. Audio Workers : As per the , worker error events should not bubble (see . This has been implemented in Firefox 42. Note Web workers Spec bug 1188141 Web Worker interfaces AbstractWorker Abstracts properties and methods common to all kind of workers (i.e. or ). Worker SharedWorker Worker Represents a running worker thread, allowing you to pass messages to the running worker code. WorkerLocation Defines the absolute location of the script executed by the . Worker SharedWorker Represents a specific kind of worker that can be from several , being several windows, iframes or even workers. accessed browsing contexts WorkerGlobalScope Represents the generic scope of any worker (doing the same job as does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features. Window DedicatedWorkerGlobalScope Represents the scope of a dedicated worker, inheriting from and adding some dedicated features. WorkerGlobalScope SharedWorkerGlobalScope Represents the scope of a shared worker, inheriting from and adding some dedicated features. WorkerGlobalScope WorkerNavigator Represents the identity and state of the user agent (the client): Examples We have created a couple of simple demos to show basic usage: ( ). Basic dedicated worker example run dedicated worker ( ). Basic shared worker example run shared worker You can find out more information on how these demos work in . Using web workers Specifications See also Using Web Workers Worker Interface SharedWorker interface ServiceWorker API Functions and classes available to workers Advanced concepts and examples : for using workers in privileged/chrome code ChromeWorker Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API Published under licence Open CC Attribution ShareAlike 3.0

Mozilla

Introduction to Web Workers API in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick Introduction to the Resize Observer API

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

A Quick Introduction to the Resize Observer API

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps