Não, o uso do atributo async
em elementos <script src="...">
é para evitar o bloqueio de renderização (blocking-render).
Sobre o uso de Ajax eu realmente não acho que seja necessário tanto trabalho, pode sim carregar o script dinamicamente com document.createElement
, nem mesmo é necessário o async
, todavia é bom usá-lo, no final da resposta tem um exemplo de como carregar dinamicamente.
Nota o atributo async
não tem efeito em scripts inline, assim por exemplo:
<script async>foobar();</script>
Quando uma tag script é solicitada a renderização da página é "travada" naquele momento até que o script seja totalmente baixado e processado, então só a partir deste ponto o que vier depois será carregado, todavia muitas coisas são desnecessárias esperar que o script carregue, então você pode usar:
<script src="..." async></script>
O que fará o script carregar paralelamente/simultaneamente sem travar a renderização, ou seja não precisará carregar o script todo para que a página possa vir a renderizar, o próprio PageSpeed Insights sugere que faça isto para uma melhor "experiencia do usuário" (UX), eu respondi outras perguntas sobre o assunto, veja:
Suporte
Em alguns navegadores mais antigos que suportam o async
usar async=false
em elementos adicionados dinamicamente não funcionava como esperado
Conforme caniuse
- Firefox 3.6+
- Internet Explorer 10+
- Chorme 8+
- Safari no iOS 5.0+
- Navegador nativo Android 3+
- Safari 5 no Mac
Múltiplos JavaScripts com dependências
Exemplo de script para carregar múltiplos .js que tenham dependências uns nos outros, ou seja um .js depende que o outro esteja carregado, mas mesmo assim evite o bloqueio de renderização:
<script>
//Esta função carrega os arquivos javascript
function loadJs(url, callback) {
var js = document.createElement("script");
//Verifica se o callback é uma função
if (typeof callback === "function") {
var isReady = false;
//Executa se for carregado no onload ou readystatechange
function ready() {
if (isReady) return;
//Bloqueia execução repetida do callback
isReady = true;
//Chama o callback
callback();
}
js.onload = ready;
/*Internet explorer (http://stackoverflow.com/q/17978255/1518921)*/
js.onreadystatechange = function() {
if (/^(complete|loaded)$/.test(js.readyState)) ready();
}
}
js.async = true;
js.src = url;
document.body.appendChild(js);
}
loadJs("js/jquery.min.js", function() {
loadJs("js/bootstrap.js"); //Depende do jQuery
loadJs("js/plugin.js"); //Depende do jQuery
});
//Não depende do jQuery
loadJs("js/outros-scripts.js");
</script>
<script src="...">
dentro?