Using Inline Web Workers To Improve UI Performance

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);