Skip to content

Latest commit

 

History

History
69 lines (41 loc) · 4.37 KB

web-workers.md

File metadata and controls

69 lines (41 loc) · 4.37 KB

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.)

How Web Workers Work:

Web Workers run in an isolated thread and run in the background, independently of any user interface scripts. This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.

The Process

  1. Creating a Worker: The first step in using a Web Worker is to create a new Worker object. The Worker constructor takes one argument, the URL of the script to run in the worker thread. In the code you provided, a new Worker object is created with the script located at 'worker.js':

    let myWorker = new Worker('worker.js');

    This line of code creates a new worker and starts executing the code in 'worker.js' in a separate thread.

  2. Worker Scope: The worker thread has its own global scope, separate from the main thread. This means that it does not have access to the DOM or any global variables or functions from the main thread. It does, however, have access to a number of web APIs, such as Fetch and IndexedDB.

  3. Communicating with a Worker: Communication between the main thread and the worker thread is done using the postMessage method and the onmessage event handler. The main thread can send messages to the worker using the worker's postMessage method, and the worker can send messages to the main thread using the postMessage method of the global scope.

    Here's an example of sending a message from the main thread to the worker:

    myWorker.postMessage('Hello, worker!');

    And here's an example of the worker receiving that message and sending a message back to the main thread:

    // Inside worker.js
onmessage = function(e) {
    console.log('Message received from main script');
    let workerResult = 'Result: ' + (e.data);
    console.log('Posting message back to main script');
    postMessage(workerResult);
}

  4. Terminating a Worker: If you need to immediately terminate a worker, you can do so using the terminate method:

    myWorker.terminate();

    This immediately terminates the worker, even if it is in the middle of executing code. Be aware that this is a somewhat drastic action and should only be used when absolutely necessary.

Use Cases and Pros-Cons for Web Workers:

  1. Data Fetching: Web Workers are great for fetching data from APIs in the background. This can be useful when you need to fetch large amounts of data and don't want to block the UI thread.

  2. Heavy Computations: If your web app involves heavy computations, Web Workers can be used to perform these computations in the background. This can help to keep your UI responsive.

  3. Image Manipulation: Web Workers can be used for image processing or other similar tasks that are computationally expensive.

Pros of Web Workers:

  1. Non-blocking: The main advantage of Web Workers is that they run in a separate thread, so they don't block the main thread. This means your web app can remain responsive even while heavy computations are being performed.

  2. Concurrency: Web Workers allow you to perform tasks concurrently with the main thread, which can lead to performance improvements in your web app.

Cons of Web Workers:

  1. Limited Access to Web APIs: Web Workers do not have access to the DOM or other web APIs. They can only use a subset of JavaScript's features.

  2. Communication Overhead: Communication between the main thread and worker threads can be slow, especially for large amounts of data. Data passed between the main page and workers is copied, not shared. If you pass a large array to a worker, it is copied, not shared.

  3. Browser Support: While most modern browsers support Web Workers, there are still some older browsers that do not. You'll need to make sure your web app degrades gracefully in these browsers.