I'll demonstrate how you can use inline web workers to perform intensive tasks without blocking the main thread.
According to the Mozilla Developers Network (MDN) documentation
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.
In other words, Web workers enable you to run JavaScript in a separate thread.
Worth mention that this is not a comprehensive post about web workers, my aim here just to show how you can use inline web workers easily.
There are two kinds of Web Workers, Dedicated Workers, and Shared Workers, the difference is Shared Workers can be accessed by any script that comes from the same domain whilst Dedicated Workers can only be accessed from the same script that created it.
Inline web worker comes under Dedicated Workers kind.
the difference between inline web worker and web worker is that inline web worker could be created using Blob
object different that web worker that need standalone file.
we'll use the compute helper function to spawn thread.
compute is generic function that has two parameter, computation
and message
it spawns an inline web worker, executes the computation
argument passing it the message
argument, and returns a promise with either rejection in case of error or resolve when finish.
function fibonacci(num) {
if (num <= 1) return 1;
return fibonacci(num - 1) + fibonacci(num - 2);
}
// fibonacci(10) will be running in inline web worker.
const result = await compute(fibonacci, 10);
don't worry about worker termination, it will be terminated immediately after resolving the result.
Let's see the example for better understanding.
- For clarity about what Iโm going to talk about, the full project is available to browse through Github.
Here's an image explaining what will happen to the main thread when running CPU intensive tasks.
you should see the battery hanging for at least two seconds.
Executing the same code but in inline web worker
MDN Codepen-UI html5rocks-The Basics of Web Workers Twilio-Optimizing JavaScript Application Performance with Web Workers