Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript

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