- HTML is downloaded and parsing starts
- Each element is parsed, styles registered, script executed (inline or external)
- When entire DOM is parsed, document.DOMContentLoaded event fires, in JQuery this is the $(document).ready(), shorthand "($function() {})"
- When DOM and assets (including parsing of all CSS and JS) is complete, window.load event fires
- Loading of JS blocks DOM parsing
- Some browser (IE) implement speculative pre-parsing using a simple parser to pre-download resources
- JS that interact with elements in the DOM needs to be placed after the particular elements (or entire DOM, before the ) to avoid missing elements.
<script async src="myAsyncScript.js"></script>
is loaded asynchronously in arbitrary order, will finish before window.load event is fired<script defer src="myDeferScript.js"></script>
is loaded synchronously after DOM structure is near complete (just before DOMContentLoaded event fires), it is synchronous so will hold up getting to DOMContentLoaded event- Always use
(document|window).addEventListener(function() {})
instead of assigning to event handler direct likewindows.onload=function() {}