Usando async e adie para carregar scripts em ordem
Então, estou seguindo a recomendação do Google PageSpeed para adiar scripts acima da dobra. Digamos que este é o código no meu<head>:
<script src="/js/jquery.js"></script>
<script src="/js/functions.js"></script>
ofunctions.js script depende do jQuery, por isso é crucial quejquery.js é carregado e executado antesfunctions.js.
adiar
<script src="/js/jquery.js" defer></script>
<script src="/js/functions.js" defer></script>
Enquanto isso funciona efunctions.js é executado corretamente, quando carrego a página, vejo-a piscar, como se o CSS ainda não estivesse carregado. Observe que o código acima está no<head>. Se eu remover odefer atributo dejquery.js, a tremulação desaparece. Isso me leva à minha pergunta:
Misturado
<script src="/js/jquery.js" async></script>
<script src="/js/functions.js" defer></script>
Usandoasync no script de dependência edefer no script dependente garantir que eles sempre serão executados nessa ordem? Parece funcionar nos meus testes, mas não sei o suficiente sobre como o analisador funciona para ter certeza.