Question

do you have any experiences with the following problem: JavaScript has to run hundreds of performance intensive function calls which cannot be skipped and causing the browser to feel crashed for a few seconds (e.g. no scrolling and clicking)? Example: Imagine 500 calls for getting an elements height and then doing hundreds of DOM modifications, e.g. setting classes etc.
Unfortunately there is no way to avoid the performance intensive tasks. Web workers might be an approach, but they are not very well supported (IE…). I’m thinking of a timeout or callback based step by step rendering giving the browser time to do something in between. Do you have any experiences you can share on this?

Best regards

Answer 1

Here is what I can recommend in this case:

1. Checking the code again. Try to apply some standard optimisations as suggested, e.g. reducing lookups, making DOM modifications offline (e.g. with document.createDocumentFragment()…). Working with DOM fragments only works in a limited way. Retrieving element height and doing complex formating won’t work sufficient.
2. If 1. does not solve the problem create a rendering solution running on demand, e.g. triggered by a scroll event. Or: Render step by step with timeouts to give the browser time to do something in between, e.g. clicking a button or scrolling.

Short example for step by step rendering in 2.:

var elt = $(...);
function timeConsumingRendering() {

    // some rendering here related to the element "elt"

    elt = elt.next();
    window.setTimeout((function(elt){
        return timeConsumingRendering;
    })(elt));
}
// start
timeConsumingRendering();