Question

135

How to avoid freezing the browser when doing long-running computations in Javascript

rated 0 times [ 141] [ 6] / answers: 1 / hits: 38479 / 12 Years ago, sat, november 24, 2012, 12:00:00

I have a web page where a javascript calculation in a function takes lot of time to finish and makes the page to freeze. What technique should I use to make sure the javascript does not freeze the browser when the calculation is happening in the background?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingcarloe

Add To Favorites

Follow

Total Points: 677

Total Questions: 109

Total Answers: 96

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

answered 12 Years ago stephonkeandrer · Accepted Answer

If you only need to do a calculation and don't need to access the DOM during the long running calculation, then you have two options:

You can break the calculation up into pieces and do a piece at a time on a setTimeout(). On each setTimeout() call, the browser will be free to serve other events and will keep the page alive and responive. When you finish the last piece of the calculation, you can then carry out the result.

You can run the calculation in the background using a webworker in modern browsers. When the calcuation is done in the webworker, it sends a message back to the main thread and you can then update the DOM with the result.

Here's a related answer that also shows an example: Best way to iterate over an array without blocking the UI