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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

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!