O HTML não é necessariamente "pausado", na verdade o que deve estar ocorrendo é que alguma execução de script que esta manipulando o DOM de suas páginas, logo não é necessariamente o async
que pausou algo.
O async
faz "o download" ocorrer sem parar o processo de renderização, ou seja não tem haver com a execução do script, mas sim com o download, logo depois do download a execução de uma rotina especifica pode sim afetar algo, depende muito do que fez.
O defer
é semelhante ao evento DOMContentLoaded
, exemplo:
document.addEventListener("DOMContentLoaded", function(event) {
....
});
Ou semelhante ao $(document).ready()
do jQuery, como eu disse são semelhantes apenas e só, o atributo defer
é usado apenas para scripts externos e vale notar também que ele será executado antes do evento DOMContentLoaded
.
Quando async
é omitido ou é false
o script terá que baixar e executar antes (a partir do ponto aonde foi injetado na página), por exemplo:
<p>foo</p>
<script src="foo.js"></script>
<p>bar</p>
Neste caso <p>foo</p>
seria renderizado e <p>bar</p>
não, neste caso abaixo:
<head>
<script src="foo.js"></script>
</head>
<body>
...
O <body>
só seria renderizado depois de foo.js ser baixado e executado.
Essa resposta do @Renan já dá uma boa margem de entendimento (inclusive sua pergunta):
Creio eu que com isto tudo o que você deseja resolver é o bloqueio de renderização (blocking-render), logo isso deve ser um problema especifico, vou explicar um detalhe, é provavelmente que você tenha scripts em série assim:
<script src="jquery.js"></script>
<script src="foo.js"></script>
<script src="bar.js"></script>
<script src="baz.js"></script>
Neste caso o jquery.js é baixado e executado, então só depois disto o download de foo.js começara, o mesmo vale para bar.js e baz.js, que precisam esperar os anteriores serem baixados e carregados na ordem que estão, no entanto se fizer isso:
<script async src="jquery.js"></script>
<script async src="foo.js"></script>
<script async src="bar.js"></script>
<script async src="baz.js"></script>
Todos serão baixado quase ao mesmo tempo, o que irá diferenciar é o peso e a concorrencia, que poderá variar qual será baixado antes, supondo que todos dependam do jQuery.js, se eles forem baixados primeiro e o jquery só depois todos irão falhar, então não basta apenas colocar async para vencer o bloqueio de renderização e acabar quebrando o site, por isto mesmo formulei esta resposta com uma sugestão de como fazer download assincrono e conseguir preservar a ordem:
Note que defer
respeita a ordem de execução e download, mas ele só é iniciado após a página HTML ter sido baixada por completo e ter sido renderizada, mas também é preciso notar que você pode usar defer e async combinados que irá ter o comportamento de ambos combinado:
Carregarão assincronamente na ordem que forem baixados e executados, mas só após o HTML ter sido renderizado por completo
CSS e o bloqueio de renderização [extra]
Como expliquei nesta resposta https://pt.stackoverflow.com/a/115240/3635 o CSS também afetar causando o bloqueio de renderização, mas ele não tem um atributo async
para resolver, o que você poderia experimentar é usar o evento onload
para só processar o CSS quando ele estivesse devidamente carregado:
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>
Ou até mesmo só carregar ele via JavaScript, por exemplo:
function loadCss(css) {
var added = false;
function trigger()
{
if (added) return;
added = true;
var css = document.createElement("link");
css.onload = function() {
document.body.appendChild(css);
};
css.rel = "stylesheet";
css.src = css;
}
if (document.readyState !== "loading") {
trigger();
} else {
document.addEventListener("DOMContentLoaded", trigger);
}
}
loadCss("css/seu_css.css");
loadCss("css/seu_outro_css.css");
Defer
serve para indicar que determinado script deve ser carregado antes do eventoDOMContentLoaded
, porém ele irá baixar na ordem (enquanto o scriptA.js
não for baixado/executado, o navegador não irá baixar/executar o scriptB.js
). Já oAsync
serve para indicar ao navegador que ele pode continuar baixando e executando outros scripts independentes, ou seja, o navegador irá baixar e executar sem seguir a ordel (1ºA.js
, 2ºC.js
, 3ºE.js
etc). E não, odefer
— sozinho — não tem um impacto grande no carregamento da página, mas ambos (depende dos fatores) sim.