Explorar tipos de scripts async, defer e dinâmicos.
>
>
>
Agora, os scripts podem ser mais pesados que o HTML e seu tamanho de download é maior, e o tempo de processamento também é maior.
Mas pode haver algumas questões importantes como:
- Scripts não podem ver elementos DOM abaixo deles
- Se houver um script volumoso no topo da página, ele “bloqueia a página”. Os usuários não podem ver o conteúdo da página até que ela seja baixada e executada.
>
Nós podemos resolver este problema colocando o script no final (depois de html), mas essa solução forçará o script a carregar depois de html carregar. Para documentos HTML longos, isso pode ser um atraso notável se as pessoas tiverem internet lenta.
Felizmente, existem dois atributos <script> que resolvem o problema para nós: defer e async.
Com o deferir atributo o navegador carrega o script em modo ‘background’ e o executa quando ele carrega.
>
>
>
Então o modo defer evita bloquear a página e os scripts com defer sempre executar quando o DOM estiver pronto, mas antes de DOMContentLoaded evento.
O evento DOMContentLoaded é disparado quando o documento HTML inicial é completamente carregado e analisado, sem esperar por folhas de estilo, imagens e subquadros para terminar o carregamento.
Cripts diferidos mantêm sua ordem relativa, assim como os scripts regulares. Então, se tivermos um script longo primeiro, e depois um menor, então o último aguarda.
Mas o atributo defer é ignorado se a tag <script> não tiver src.
Async
O atributo async significa que ele ajuda o script a carregar em modo ‘independente’.
O browser carrega páginas sem esperar que scripts async sejam carregados. DOMContentLoaded e async scripts não esperam um pelo outro (ordem “load-first”).
Outros scripts não esperam por async scripts, e async scripts não esperam por eles. O modo Async (como o modo deferir) não bloqueia a página.
Async scripts são ótimos quando integramos um script independente de terceiros na página: contadores, anúncios, ferramentas analíticas, etc., pois não dependem de nossos scripts, e nossos scripts não devem esperar por eles.
Dinâmica
Também podemos adicionar um script dinamicamente usando JavaScript:
O script começa a carregar assim que é anexado ao documento e se comporta como scripts “async” por padrão.
Significa:
- Não esperam por nada, nada espera por eles.
- O script que carrega primeiro – corre primeiro (ordem “load-first”).
Mas podemos desligar o modo async para scripts dinâmicos configurando script.async = false antes de anexá-lo ao html.
Resumo
Both async e defer têm uma coisa em comum: o download de tais scripts não bloqueia a renderização da página. Assim o usuário pode ler o conteúdo da página e se familiarizar com a página imediatamente.
Obrigado pela leitura. Espero que você tenha gostado 😎