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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • 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

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

  • By
    Multiple Background CSS Animations

    CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...

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!