$(document).ready sem jQuery: alternativas modernas em 2025

Por que em 2025 vale a pena abandonar o jQuery para $(document).ready?

Se você ainda escreve $(document).ready(function() { ... }) — ou está trabalhando com um projeto legado, ou está perdendo as oportunidades do JavaScript moderno. Em 2025, jQuery é como um telefone de botões: funciona, mas todo mundo já mudou para telas sensíveis ao toque.

No Stack Overflow, a pergunta $(document).ready equivalent without jQuery acumulou centenas de milhares de visualizações. Isso significa que desenvolvedores ao redor do mundo buscam maneiras leves, rápidas e modernas de executar código após o carregamento do DOM. E a resposta é simples: o suporte nativo dos navegadores já cobre 100% das necessidades que o jQuery resolvia antigamente.

Neste artigo, vamos abordar 3 melhores maneiras de substituir $(document).ready por JavaScript puro, discutir nuances de desempenho e mostrar exemplos reais de código que você pode usar hoje mesmo.

DOMContentLoaded — o protagonista sem jQuery

O análogo mais direto de $(document).ready é o evento DOMContentLoaded. Ele é acionado quando o navegador carregou e interpretou completamente o documento HTML, mas antes do carregamento de imagens, estilos e outros recursos. Era exatamente isso que o jQuery fazia internamente.

Aqui está a sintaxe básica:

document.addEventListener('DOMContentLoaded', function() {\n    // Seu código será executado após o carregamento completo do DOM\n    console.log('DOM completamente carregado e pronto!');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

Por que isso é melhor que jQuery?

\n
• Velocidade: Não é necessário carregar 30+ KB de biblioteca para uma única função.
\n
• Controle: Você sabe exatamente o que acontece no momento do carregamento.
\n
• Compatibilidade: Funciona em todos os navegadores modernos (IE9+, Chrome, Firefox, Safari, Edge).
\n

Mas há um detalhe: se seu script for carregado após o carregamento do DOM, o evento não será acionado. A solução é verificar document.readyState:

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM já carregado\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('Garantidamente executado após o carregamento do DOM');\n});

Esse padrão é o padrão ouro para substituir $(document).ready em 2025.

Atributo defer: a maneira mais simples sem uma única linha de código

E se eu disser que você pode nem precisar escrever DOMContentLoaded? O atributo defer na tag <script> faz todo o trabalho para você:

<script src="script.js" defer></script>

Como funciona? O navegador carrega o script em paralelo com o HTML, mas o executa somente após a interpretação completa do documento. Isso é equivalente a todo o código dentro de script.js estar automaticamente encapsulado em $(document).ready.

Vantagens:

\n
• Zero código adicional — basta adicionar o atributo.
\n
• Scripts com defer são executados na ordem em que aparecem no HTML.
\n
• Funciona em 97% dos navegadores (incluindo versões antigas do Safari).
\n

Quando usar? Ideal para scripts comuns que precisam interagir com o DOM, mas não bloqueiam a renderização. Por exemplo:

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js será executado após analytics.js, mas antes de window.onload -->

Compare com jQuery: $(document).ready dentro de app.js é código desnecessário. Com defer, você simplesmente escreve:

// app.js — n