Optimize long task in JavaScript [Part 2]

Continuing from the previous article. In this part, I will provide a more practical example.

In this example, we have saveSettings function including 5 sub-functions inside to handle rendering UI, saving data to db, and analyzing data.

If we call 5 sub-functions synchronously, it creates a long task that can make browsers laggy and unresponsive.

To improve performance, we will do critical works first and defer non-critical works (not visible to user) by using setTimeout.

Another way to defer non-critical works called yield.

Here is the result of two optimized ways mentioned above.

Zoom in the picture above, we can see that the browser responds to higher-priority work much sooner, such as user interactions or rendering. That's why the browser remains smooth.