Improve Angular Page Performance | Web Worker

What is Web Worker ?

Javascript is designed to run in a single threaded environment that means multiple scripts can’t be run at the same time.

Consider a situation where you need to handle multiple things like transform large amount of API data, manipulate DOM etc. in that cases Javascript will hang your web page where CPU utilization is very high.

To solve this critical issue Web Worker came into picture.

Web Worker is an asynchronous system for web pages that allows execution of task in the background, independently from main thread and website UI.

Let’s see the issue

In this example Javascript will go into big loop and hang the webpage.

If you run above code and click on Big Loop button then you will notice that your web page will be hanged since this big loop is a CPU extensive task and you will be able to click anywhere on the web page once this task is completed due to Javascript runs in the single threaded environment.

Web Worker will be used to fix this issue. Let’s see how ?

Following is the content of bigLoop.js file. This makes use of postMessage() API to pass the communication back to main page (above page):

If you run the above code then you will notice that this time your web page will not hang even this big loop will also run. This is because using Web Worker which runs this big loop in the background thread and will not impact the main UI thread.

Web Worker integration with Angular

It seems Web workers are used in vanilla JavaScript apps, most of us are addicted to Angular. We, Angular developers, have tried to use Web Workers in Angular but eh Webpack configuration and all proved very painful to setup. Up until the release of Angular CLI v8, using Web Workers in Angular, its setup, compiling, bundling and code-splitting was made easy by the CLI tool.

To generate a Web Worker, we run the ng g web-worker command:

This will generate app.worker.ts file in the src/app of an Angular app. The web-worker tells the CLI tools that the file would be used by a Worker.

app.worker.ts file content

In the above file you will put the code which is quite CPU intensive like the big loop logic highlighted in the above example. And this code will be executed in the separate background thread since its part of Web Worker.

Also if you open app.component.ts file then you will see below lines added:

from the above code you will pass necessary info to the Web Worker file (app.worker.ts) using postMessage API and receive the processed data from the Web Worker file using worker.onmessage event.

You can now create your own worker files as well if need but remember all worker file names should be suffixed with .worker.ts

Using Web Worker

Workers don’t have access to the DOM APIs. They can’t access any of the following:

  • window object
  • document object

Web Workers can access:

  • navigator object
  • location object (read-only)
  • XMLHttpRequest
  • setTimeout(), clearTimeout(), setInterval(), clearInterval()
  • The atob() and btoa() functions

Web Workers can also access

  • Cache object

I hope this article will help you to further improve your angular web pages.

Thanks!!!

Coder