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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

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!