Faster DOMReady Checks with MooTools

By  on  

Digging into the source code of your favorite JavaScript framework is essential to becoming a {insert framework here} rock star. Digging into other JavaScript frameworks is essential to opening your mind about JavaScript and can give you new ideas to implement improvements in your favorite framework. I was recently looking at the jQuery source code and found that jQuery checks to see if the DOM is ready every 13 milliseconds. MooTools does this same check every 50 milliseconds. Speeding up MooTools' DOMReady check, however, is as easy as updating a periodical's interval.

The MooTools JavaScript

var repeat;
if (Browser.ie){
	var temp = document.createElement('div');
	repeat = function(){
		(Function.stab(function(){
			temp.doScroll(); // Technique by Diego Perini
			return document.id(temp).inject(document.body).set('html', 'temp').dispose();
		})) ? domready() : repeat.delay(50);
	};
	repeat();
} else if (Browser.safari && Browser.version < 4){
	repeat = function(){
		(['loaded', 'complete'].contains(document.readyState)) ? domready() : repeat.delay(50);
	};
	repeat();
} else {
	document.addEvent('DOMContentLoaded', domready);
}

The above code is the important piece of the DOMReady utility file. You'll see ".delay(50)" twice in that code block; that's the number we'll update:

//....more code
repeat.delay(20);

Voila! Faster DOMReady checks!

To my knowledge, there's no science to what that number should be so don't feel as though I'm saying you should modify this number. Just wanted to let you know it was possible!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

Discussion

  1. So, umm I may sound stupid, but shouldn’t repeat be protected in some way? Like in a namespace or a more distinct name?

  2. 50ms means the average time after the dom is ready yo when it is seen is 25ms. One 40th of a second.

    I wonder how long the code even takes to process. At some point you cant get faster because the code wont even process before it is time to recheck. I wonder if IE6 can even do this in 13ms =)

    Here is where I wish the browser would just push that it is ready.

  3. Alexander

    I wonder if it is somehow related to the OS minimum timer interval … it’s normally corresponding to the USER_TIMER_MINIMUM constant on Win32 which is slightly different on windows platforms.

    i’m not sure, but apparently windows 95 had 55ms minimum, XP has about 10 or 25 depending on the sources …

  4. Johanna

    Parle vous de version 1.30 ?
    There is no notice about the version used.
    Would you understand me if I would talk to you in french … ?

  5. @Johanna: Yes, this is for MooTools 1.3. MooTools 1.2 will look similar if not exactly the same.

  6. Jean-Nicolas

    @johanna I can translate, if you want.

  7. @James: All I tried to do is demonstrate that you need to change 50 to any number lower.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!