Member-only story
Exploring Web Workers in Angular
How to improve application performance and user experience with web workers in Angular
This article is about — you guessed it — web workers in Angular.
Web workers allow us to execute JavaScript off the main thread. We will present how they can improve application performance and user experience.
More threads mean more things are done at the same time. But with great power comes great responsibility. We need to manage and synchronize the threads.
Looks like we’ve got a few points to cover.
Let’s get started!
A Few Words Before the Action
Angular is a TypeScript-based framework for building single-page web applications. TypeScript is a superset of JavaScript.
But, as you may already know, browsers can only understand JavaScript. Therefore, everything in an Angular project must be “transpiled” into JavaScript.
JavaScript is a single-threaded language; thus, any application is built with Angular. Everything runs on a single thread, the so-called main thread.
A single thread can do only one thing at any given moment. This can be problematic when running computationally expensive commands.
Imagine that our application needs to perform heavy calculations or render large charts. At some point, the application freezes while the main thread struggles to do all the work.
Bummer! Is there a way to avoid this and improve user experience?
Enter web workers!
The MDN documentation states, “Web workers are a simple means for web content to run scripts in background threads.”
Web workers are separate threads that can run scripts in the background without interfering with the main thread. They can run independently without affecting the performance of the page.
