Web worker

A web worker, as defined by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page.[1] Web workers are often able to utilize multi-core CPUs more effectively.[2]

The W3C and WHATWG envision web workers as long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions. Keeping such workers from being interrupted by user activities should allow Web pages to remain responsive at the same time as they are running long tasks in the background.

The simplest use of workers is for performing a computationally expensive task without interrupting the user interface.

The web worker specification is part of the HTML Living Standard.[1]

Overview

As envisioned by WHATWG, web workers are relatively heavy-weight and are not intended to be used in large numbers. They are expected to be long-lived, with a high start-up performance cost, and a high per-instance memory cost.[1]

Web workers run outside the context of an HTML document's scripts. Consequently, while they do not have access to the DOM, they can facilitate concurrent execution of JavaScript programs.

Features

Web workers interact with the main document via message passing. The following code creates a Worker that will execute the JavaScript in the given file.

var worker = new Worker("worker_script.js");

To send a message to the worker, the postMessage method of the worker object is used as shown below.

worker.postMessage("Hello World!");

The onmessage property uses an event handler to retrieve information from a worker.

worker.onmessage = function(event) {
	alert("Received message " + event.data);
	doSomething();
}
	
function doSomething() {
	//do work
	worker.postMessage("Work done!");
}

worker.terminate();

Once a worker is terminated, it goes out of scope and the variable referencing it becomes undefined; at this point a new worker has to be created if needed.

Example

The simplest use of web workers is for performing a computationally expensive task without interrupting the user interface.

In this example, the main document spawns a web worker to compute prime numbers, and progressively displays the most recently found prime number.

The main page is as follows:

<!DOCTYPE html>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

The Worker() constructor call creates a web worker and returns a worker object representing that web worker, which is used to communicate with the web worker. That object's onmessage event handler allows the code to receive messages from the web worker.

The Web Worker itself is as follows:

var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
  n++;
  for (var i = 2; i <= Math.sqrt(n); i++)
    if (n % i == 0)
      continue search;
  // found a prime!
  postMessage(n);
}

To send a message back to the page, the postMessage() method is used to post a message when a prime is found.[1]

Support

If the browser supports web workers, a Worker property will be available on the global window object.[3] The Worker property will be undefined if the browser does not support it.

The following example code checks for web worker support on a browser

function browserSupportsWebWorkers() {
  return typeof window.Worker === "function";
}

Web workers are currently supported by Chrome, Opera, Edge, Internet Explorer (version 10), Mozilla Firefox, and Safari.[4][5][6] Mobile Safari for iOS has supported web workers since iOS 5. The Android browser first supported web workers in Android 2.1, but support was removed in Android versions 2.2–4.3 before being restored in Android 4.4.[7][8]

References
  1. Web Workers, WHATWG, retrieved 3 June 2010
  2. "HTML Living Standard". Html.spec.whatwg.org. 30 January 2017. Retrieved 31 January 2017.
  3. "HTML5 Up and Running" Mark Pilgrim. O'Reilly/Google Press. August 2010
  4. "Introducing HTML5", Lawson, B. and Sharp, R., 2011.
  5. "HTML5 and CSS3" Brian P. Hogan. The Pragmatic Programmers, LLC 2010.
  6. "Can I Use... Web Worker". caniuse.com. Retrieved 30 September 2019.
  7. "Archived copy". Archived from the original on 19 October 2013. Retrieved 10 July 2011.CS1 maint: archived copy as title (link)
  8. "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 10 June 2017.

This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.