Eu tenho alguma confusão em torno do novo atributo async para o elemento script em HTML5 que eu espero que alguém possa dar uma resposta clara.

Os navegadores são capazes de conexões paralelas, portanto, as imagens serão baixadas em paralelo. Mas qualquer javascript externo não é baixado em paralelo com outras imagens e javascript externos. Os scripts bloqueiam o carregamento da página até que sejam baixados e executados.

Para fazer o download de um script sem bloquear o restante do carregamento da página, a técnica mais comum é criar um elemento de script, como o snippet do Google Analytics:

var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.src = '...ga.js';
ga.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);

Eu não tenho certeza de como isso funciona exatamente - seja

o navegador analisa e processa a página, depois que ela é concluída, percebe que o DOM foi alterado, o que fez com que o script ga.js fosse baixado e executado

ou

o navegador inicia o download do javascript em paralelo com outros recursos.

Eu acho que esse é o último.

O novo snippet assíncrono do Google Analytics inclui o atributo assíncrono HTML5 no elemento de script criado. Isso não ajudará o problema de bloqueio de página - que já foi resolvido pela técnica "Script DOM Element". Então, o que async adicionar à imagem? De acordo com w3schools, "se async estiver presente, o script é executado de forma assíncrona com o resto da página (o script será executado enquanto a página continua a análise)".

E de acordo com o site de Steve Souders, "o principal benefício deste [atributo async] é dizer ao navegador que os scripts subseqüentes podem ser executados imediatamente - eles não precisam esperar pelo ga.js".

Então, são async e a técnica do elemento Script DOM ambos resolvendo o mesmo problema?