jQuery: Por que usar document.ready se JS externo na parte inferior da página?

Estou incluindo todos os meus JS como arquivos externos que são carregados na parte inferior da página. Dentro desses arquivos, tenho vários métodos definidos como tal, que chamo do evento ready:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

No entanto, quando eu removo a função ready e chamo os métodos diretamente, tudo funciona da mesma forma, mas é executado significativamente mais rápido - quase um segundo inteiro mais rápido em um arquivo bem básico! Como o documento deve ser carregado neste ponto (já que toda a marcação vem antes das tags de script), há algum bom motivo para ainda estar usando o evento pronto?

Ótima pergunta.

Existe alguma confusão em torno de todo o conselho "coloque scripts no final da página" e quais problemas ele tenta resolver. Para esta pergunta, não vou falar se colocar scripts na parte inferior da página afeta o desempenho / tempos de carregamento ou não. Eu só vou falar se você também precisa $(document).ready colocar scripts no final da página .

Presumo que você esteja fazendo referência ao DOM nas funções que está chamando imediatamente em seus scripts (qualquer coisa tão simples quanto documentou document.getElementById). Também estou supondo que você está perguntando apenas sobre esses arquivos [referência ao DOM]. IOW, scripts de biblioteca ou scripts que seu código de referência de DOM requer (como jQuery) precisam ser colocados anteriormente na página.

Para responder à sua pergunta : se você incluir seus scripts de referência de DOM na parte inferior da página, não, você não precisa $(document).ready.

Explicação : sem a ajuda de"onload" implementações relacionadas, como $(document).readya regra é: qualquer código que interage com os elementos DOM dentro da página deve ser colocado / incluído mais abaixo na página do que os elementos aos quais faz referência. A coisa mais fácil a fazer é colocar esse código antes do fechamento </body>. Veja aqui e aqui . Ele também contorna o temido erro "Operação abortada" do IE .

Dito isso, isso de forma alguma invalida o uso de $(document).ready . Fazer referência a um objeto antes de ser carregado é [um dos] erros mais comuns cometidos ao iniciar em JavaScript DOM (testemunhado muitas vezes para contar). É a solução da jQuery para o problema e não requer que você pense sobre onde esse script será incluído em relação aos elementos DOM aos quais ele faz referência. Esta é uma grande vitória para os desenvolvedores. É apenas uma coisa a menos em que eles precisam pensar.

Além disso, geralmente é difícil ou impraticável mover todos os scripts de referência do DOM para a parte inferior da página (por exemplo, qualquer script que emita document.writechamadas deve permanecer parado). Outras vezes, você está usando um framework que renderiza algum template ou cria pedaços de javascript dinâmico, dentro do qual faz referência a funções que precisam ser incluídas antes do js.

Finalmente, costumava ser "prática recomendada" colocar todo o código de referência DOM em window.onload , no entanto, foi eclipsado por $(document).readyimplementações por motivos de documentação adequada .

Tudo isso resulta em $(document).readyuma solução muito superior, prática e geral para o problema de referenciar elementos DOM muito cedo.