Question

I have a simple webpage that serves as an introduction to a more complex set of data.

This complex set of data takes a lot of time to render.

For new users when they arrive at the simple webpage I start rendering the complex page in the memory, creating html elements, etc without inserting them into the dom.

However this is still visibly slow, and causes scrolling on the introduction page to stall and lag.

I’m thinking about using webworkers. But before I commit to something like that I’m inquiring if that’s actually the way to go or if there are other solutions also possible. Thanks.

Edit:

Thinking about it I don’t actually access the dom when rendering data, the templating engine puts strings together to create html, so webworkers are totally fine.

Is there anything anyone can share about this method?

Answer 1

Certainly web workers would be the way to go. But for browsers that don’t support web workers (IE < 10), here is a fallback approach:

If your code is synchronous, it will freeze the browser while it is running. However, if you can chunk your processing into decent sized chunks, you can break it up just enough to allow the browser a chance to respond to user interactions.

So, this code:

for (var i = 0; i < data.length; i++) {
    processData(data[i]);
}

Becomes this:

var i = 0;
(function processNext() {
    if (i < data.length) {
        processData(data[i++]);
        setTimout(processNext, 0);
    }
})();

It’s not ideal – if processData() does too much, the UI will still be unacceptably unresponsive. On the other hand, if it doesn’t do very much, it can slow your data processing down a lot. In the latter case, you can process a certain number of iterations at a time before calling setTimeout:

var i = 0;
(function processNext() {
    if (i < data.length) {
        for (var stop = i + 100; i < stop && i < data.length; i++) {
            processData(data[i]);
        }
        setTimout(processNext, 0);
    }
})();