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 spawn thread.

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 Im 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