Introduction

We'll dive into a classic UI responsiveness problem. One where you interact with the UI and suddenly things freeze.

Summary

• Heavy computations in the main thread can block the UI.

• Move heavy computations to a different thread.

• In the world of web development, we have the option of using web workers.

The problem

The fundamental problem is keeping the UI responsive while you do heavy computations.

One example is an image editing tool where you apply a bunch of edits to an image. The image needs to process each edit and apply it to the image. If processing each edit blocks the main thread, the UI will freeze. Meaning, while the processing happens, you can't do anything else.

This isn't just tied to the web. It's a general UI responsiveness problem.

The solution

The solution is to move the heavy computations to a different thread. This way, the main thread isn't blocked and can continue to process other functions.

Web workers

On the web, we can use web workers to move the heavy computations to a different thread.

It's worth noting that web workers can't directly access the DOM. However, you can receive data from the web worker and update the DOM from the main thread after receiving the data.