Javascript [defer] attribute and document.ready?

Question

After reading about the defer attribute at mdn

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

It looks nice.

So I've tested it against $(function () { }); and $(window).load(...)

<script>
$(function ()
{
  alert('1')
});
$(window).load(function ()
{
  alert('2')
});
</script>

<script defer="defer">
  alert('4');
</script>

This code Always output 4,1,2 !

Ok So now I can recognize the time where the document is parsed.

In what scenarious will i need the stage before document.ready (where the parse time complete) ?

Answer 1

From MDN

The defer attribute shouldn't be used on scripts that don't have the src attribute

The actual use would be that you can still have scripts at the top of the page and make the browser load them after the entire page is parsed fully thus improving the client side of the performance.

From YSlow

The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering

Answer 2

Check out the W3 HTML spec:

The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present.

So, this attribute is only valid for external scripts.