Nota: apenas traduzi o texto abaixo e postei aqui.
Costumo ver desenvolvedores com experiência em jQuery usarem um equivalente vanilla JS do jQuery.ready() event antes de executar seu código.
document.addEventListener('DOMContentLoaded', function () {
// Este código não será executado até que
// o conteúdo do DOM seja carregado...
console.log('carregado!');
}, false);
Você precisa de algo assim quando seu JavaScript está no head, mas faz referência a coisas no body. Se você não esperar até que o conteúdo seja carregado, esses elementos ainda não existirão e seu script lançará um error.
A questão é... se você vai esperar até que o DOM seja carregado antes de executar o script, por que não colocá-lo no footer?
// Este código será executado imediatamente, mas se estiver
// no footer, o conteúdo do DOM já está carregado
console.log('loaded!');
O JavaScript no header também pode causar grandes gargalos e delays na renderização, portanto, mover seu script para o footer também é melhor para o desempenho!
Auxílio do atributo defer
Ao adicionar o atributo defer em um script element no head fará a mesma coisa e proporcionará melhores ganhos de desempenho.
<script defer src="caminho/para/meu/script"></script>
O attributo defer diz ao navegador para esperar até que o conteúdo do DOM seja carregado antes de baixar e analisar um script.
Com defer, o navegador pode encontrar o script um pouco mais cedo do que o preload scanner (scanner de pré-carregamento) e, então, pode priorizá-lo/baixá-lo em paralelo enquanto o DOM está sendo analisando.
Isso significa que o DOM pode ser completamente analisado e o domInteractive é acionado enquanto o JS ainda pode estar sendo baixado, em vez de esperar até que o JS volte e seja analisado e executado.
Resumindo: com defer em um script no head, o arquivo JavaScript será baixado em background enquanto o restante do DOM é analisado e renderizado. Quando você chegar ao final da página, o arquivo JS já está baixado e pronto para ser executado.
Para um melhor esclarecimento da funcionalidade do atributo defer (e também do atributo async) presente na tag script, dê uma olhada no artigo "No <script>, qual a finalidade dos atributos async e defer?" escrito pela Thais Alencar.
Fonte
Newsletter de Go Make Things
Top comments (0)