I'll demonstrate how you can use inline web workers to perform heavy computation without blocking the main thread.
Web Worker
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.
Creating Web Worker
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 create web workers.
Compute Helper
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.
Running without web worker
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.
Running with web worker
Executing the same code but in inline web worker
Additional Resources
MDN: Web Workers
Codepen: UI
html5rocks: The Basics of Web Workers
Twilio: Optimizing JavaScript Application Performance with Web Workers
Top comments (0)