Async VS Defer VS The Other

I write this just as a reminder of this awesome article, and my tiny version of the quick reference part. Also I feel confused about these things for a long time, and nearly messed up one interview.

Plain script elements

<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>

Defer

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Async

<script src="//other-domain.com/1.js" async></script>
<script src="2.js" async></script>

Async false

[
  '1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script')
  script.src = src
  script.async = false
  document.head.appendChild(script)
})

Why we need this?

Scripts that are dynamically created and added to the document are async by default, they don’t block rendering and execute as soon as they download, meaning they could come out in the wrong order. However, we can explicitly mark them as not async.

This gives our scripts a mix of behavior that can’t be achieved with plain HTML. By being explicitly not async, scripts are added to an execution queue, the same queue they’re added to in our first plain-HTML example. However, by being dynamically created, they’re executed outside of document parsing, so rendering isn’t blocked while they’re downloaded (don’t confuse not-async script loading with sync XHR, which is never a good thing).

So maybe this is the silver bullet in the ideal case, but the reality is that the IE < 10 browsers are the obstacles.