Avoiding a freeze when executing all javascript functions onDomReady / onDomLoaded

Question

So I want to migrate all my javascript functions to requireJS and will try to use as much as possible the ondomready event. BUT:

this will freeze the browser, since all javascript is synchronously. This is bad. I mean wow the user sees the browser content a bit faster, but is going to try to click somewhere just to realize the browser was frozen, and has to click again. This is very bad. Is there a way around this?

Why do you think the browser will freeze just because you are loading JS files with requireJS? — jfriend00, Apr 18 '14 at 00:31
@jfriend00 I don't think, I know. The point is not loading javascript files. I am talking about executing javascript functions. Since You throw _all and everything_ on the domready event, this will lead to this occurrence, if you do a lot. If all you do is a little fart, then yes, it wont freeze — Toskan, Apr 18 '14 at 03:53
The issue here is that if you have a ton of time consuming javascript to execute just to initialize the page, then it doesn't really matter whether you do it all in onDomReady or a little before that or in small pieces before that or a little after that. Whenever it executes, the page will be busy until it's done executing. Fortunately, initializing the page is usually not super time consuming (setting up event handlers, etc...). — jfriend00, Apr 18 '14 at 04:05
People who marked this as a duplicate - please read the OP's first comment. This is NOT about a JS loader. — jfriend00, Apr 18 '14 at 15:34

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Patient: It hurts when I do this.

Doctor: Then don't do that.

If you see freezing on the dom ready event then perhaps you are trying to do too much. Executing javascript is quick. Doing a page redraw is slow.

Rather than lots of small events that each make changes to the dom and each cause a page redraw you should have one function that processes a list of changes that need to be made. This is what the domReady plugin does before the ready event. After the ready event it just runs them as it receives it which could cause multiple redraws.

I learnt this while writing my own animation library. I was using individual setInterval()'s to change a single property. When doing more that four a once the animation was no longer smooth. A better way to do this is a single interval that processes a list of changes that need to be made.

Edit:

Instead of using domReady as a plugin require(["domReady!"], use it as a module so that you can run initialisation code straight away then make changes to the dom later.

require(["domReady"], function(domReady) {
    var element = document.createElement('table');
    //more setup code
    domReady(function(){
        document.body.appendChild(element);
    });
});

Avoiding a freeze when executing all javascript functions onDomReady / onDomLoaded

1 Answers1