DPS921/Web Worker API

Project Summary

Team Members

1. Khang Nguyen
2. Anton Biriukov
3. Akshatkumar Patel

Brief Description

JavaScript is a powerful programming language of the web but it is single-threaded by nature. The Web Workers API, introduced in HTML5 and supported by modern browsers, remedies that by enabling web applications to execute computationally expensive JavaScript code in a background thread separated from the main interface thread. Besides that, a background thread can be shared between other threads in the same web application and, therefore, facilitates lightweight communication between multiple windows of that application. Overall, the project's objectives are to explore the Web Worker API and how to utilize it in improving the overall performance and user experience of web applications.

Introduction

Parallel computing has certainly become a very wide-spread and rapidly-developing area in programming. It comes from the fact that a number of resources grouped together can solve problems faster. We are all well-aware of multi-core and multithreaded CPUs and GPUs that provide technical compatibility to support parallel computing. There are a number of parallel computing libraries, such as OpenMP, MPI, TBB, that we have looked into in our course. However, we have not discussed any front-end web development APIs allowing for multithreading.

Modern web applications feature a wide range of computationally expensive tasks, such as data fetching, advertisement, image processing, and others. Until recently, parallel computation has been mostly applied on the backend part of web applications and not so much on the front-end. However, to keep up with the increased backend parallelism frontend also needs to utilize this technique. As stated previously, in our research project we will investigate how the use of Web Workers API might help us achieve this goal.

Web Workers API

Overview

Web Workers API, as specified in the HTML Living Standard, is an application programming interface that defines specifications for running scripts in the background independently of any user interface scripts. The first iteration of the Web Workers API standard was initially presented in 2010 with HTML5. Even though web workers are not a part of JavaScript, but rather a browser feature, they can be accessed through JS. Web Workers are utilized by millions of websites across the web for a multitude of tasks, varying from image processing to artificial intelligence and even bitcoin mining. There is a number of interfaces defined in the Web Workers API, but we will mainly focus on the following two: Shared and Dedicated workers. Both of them inherit from the WorkerGlobalScope, which represents the generic scope of any worker, which primarily does the same thing as Window in the normal web content.

Basic Syntax

Web Workers are created by a constructor function Worker():

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

In order to pass information between workers and the main thread postMessage() method and the onmessage event handler are used. The following is an example of how to send a simple string to the web worker:

myWorker.postMessage('Text message');

Then inside our worker we can use onmessage to handle the incoming message and send some response back to the main thread:

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + e;
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

Finally, back in the main thread we receive the message with the following:

myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}

Limitations

Worker thread has its own context and therefore you can only access selected features inside a worker thread. For instance, there a three main limitations:

• You can't directly manipulate the DOM from inside a worker.
• You can not use some default methods and properties of the window object since window object is not available inside a worker thread.
• The context inside the worker thread can be accessed via DedicatedWorkerGlobalScope or SharedWorkerGlobalScope depending upon the usage.

Dedicated Worker

Shared Worker

References

• HTML Standard, Web Worker section: https://html.spec.whatwg.org/multipage/workers.html
• MDN Web Docs, Using Web Workers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers