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.

Let’s see the issue

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

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

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.

ng generate web-worker app
  • document object
  • location object (read-only)
  • XMLHttpRequest
  • setTimeout(), clearTimeout(), setInterval(), clearInterval()
  • The atob() and btoa() functions