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
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Drag. Drop. Lock.

    I've received dozens of emails about my Six Degrees of Kevin Bacon Using MooTools article. The MooTools in my article contained a lot of conditional code to require correct dropping per the game and many people requested that I simplify the process and just...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

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!