Page Loads in JavaScript and Performance

This is a quick post to list the methods of initializing your JavaScript the right way in terms of Page Load Speed and in turn SEO rankings improvements and faster mobile UX.

using a jQuery helper

What it looks like;

$(document).ready(function(){

	console.log("DOM loaded but not fully parsed");

});

Notes:

• This jQuery helper is essentially an alias too document.readyState == "interactive"
• All style, async=false script, and img src resources have been loaded.
• The execution order of multiple uses of this helper is based on load order or placement in the DOM
• Any other synchronous JavaScript has executed

window load method

What it looks like;

$(window).load(function() {
                
	console.log("DOM and all frames are loaded and fully parsed");

});

Notes:

• This is an alternative to document.readyState == "complete"
• All style, script, img src resources, and frames have been loaded, including all of these inside the frames, also includes asynchronous scripts
• This is also asynchronous

Native browser states

What it looks like;

document.onreadystatechange = function () {
  if (document.readyState == "complete") {

	console.log("DOM fully loaded and parsed");

  }
}

Notes:

• This is an alternative to window.load()
• DOM fully loaded and parsed - including, jQuery.ready
• This is synchronous, using this method will lock your browser so don't do any intensive tasks.

Another native browser state

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {

	console.log("DOM loaded but not fully parsed");

  }
}

Notes:

• This is an alternative to DOMContentLoaded
• DOM fully loaded and not fully parsed - so, jQuery.ready has not yet completed but may be asynchronously executing code
• This is also synchronous

Native browser event listener

document.addEventListener("DOMContentLoaded", function(event) {
	
    console.log("DOM fully loaded and parsed");
    
});

Notes:

• This is an alternative to document.readyState == "interactive" so those notes apply
• Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4
• Earlier than Internet Explorer 8 requires the .doScroll() hack

Self-executing anonymous functions

What it looks like;

(function(){

	console.log("DOM loaded to the comment >here< and not yet fully parsed");

})(); // >here<

Notes:

• This wont execute your code within until it reaches the bottom of its declaration (comment as >here<)
• DOM has only partially loaded to this point
• The code within executes asynchronously as the DOM continues to load

Why would we do this?

• Easier to remember than all of the above and has no browser compatibility concerns as it is original native JavaScript.
• Lazy devs testing before production release will "get lucky" thinking that all their resources are loaded and available in here because they haven't needed to go through the internet to load them all.
• The only acceptable use of this technique is to do declarations asynchronously for later use, do not execute any code that rely on resources elsewhere.

jQuery anonymous function aka Deferred

$(function() {

	console.log("DOM loaded to the comment >here< and not yet fully parsed");
   
}); // >here<

Notes:

• Similar in appearance to Self executing anonymous functions but very different.
• This is an alternative to document.readyState == "interactive" so those notes apply.
• A great technique if you need to declare something that multiple jQuery.ready may use - but no other acceptable reason to use this.

Lazy load

Say you have an element on page that uses a date picker plugin, instead of loading in the resources during page load, learn the best time in your UX to load the content after the page has loaded.

$(document).on('mouseover', '.date-container',function(){
	$.getScript("ajax/test.js",function(){

		console.log( "Load was performed. Init it if needed" );
        
   });
});

Benefits?

• Less downloading, faster page speeds
• You're browser won't load in unnecessary scripts unless the user actually needs to use them.
• UX is unchanged from other usages but will be easier to debug and identify UX dependencies.

TL;DR

1. Avoid using the native Javascript implementations as they are harder to remember, too verbose and clumsy. Instead opt to use a library (jQuery not the only option here) which should simplify things and encourage best practice

2. Do not execute code until the whole DOM has loaded and parsed, but feel free to declare as much as you like as these can be easily referenced later with shared code.

3. Being fancy and using self-executing anonymous functions because they look cool and someone said they work like jQuery.ready is actually wrong and plain lazy. Use proven or library helpers because they work.

Conclusion

Lazy load everything you possibly can, this is not only the best in terms of page load speed and therefore mobile and SEO benefits, it is also logical and makes debugging UX extremely easy to follow.

Enjoyed this?

If you made it here I would love to hear what you thought of the article.

Tweet to @chrisdlangton