desenv-web-rp.com

"Colocar o Javascript na parte inferior" anula o objetivo de document.ready?

Eu sei que é recomendável colocar o Javascript na parte inferior da página, mas se eu estiver usando o jQuery, isso não anula seu objetivo de ser executado enquanto o DOM está carregando?

Se eu tiver um menu suspenso, por exemplo, os menus suspensos não serão exibidos até que todo o restante da página seja carregado. Também tento desenvolver com aprimoramento progressivo em mente, para que eu possa ter elementos ocultos com jQuery em vez de CSS (para que usuários não-JS possam vê-los).

Existe um meio feliz, talvez?

26
DisgruntledGoat

O Document.ready aguarda o carregamento do DOM antes de executar qualquer JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

A idéia de colocá-lo na parte inferior significa que, se o seu JS estiver com problemas ou se a pessoa tiver uma conexão lenta, o restante da página ainda será carregado primeiro e não será "interrompido".

O JS ainda é executado quando tudo foi carregado, seja no início ou no final.

30
Callan

Colocar o javascript na parte inferior significa que o outro conteúdo da página (especialmente o texto) é carregado antes do javascript, para que os usuários não esperem o carregamento do JS se tiverem conexões lentas.

Isso não afeta document.ready, como é chamado quando o navegador termina de preparar o DOM para uma página. De qualquer forma, tudo ainda precisa ser carregado primeiro.

6
Macha

Um script não tem uso real até o carregamento do HTML terminar - um script não pode alterar o DOM até que o HTML seja carregado. document.ready aguarda o carregamento do DOM. Portanto, não faz sentido conter coisas importantes, como folhas de estilo.

Coloque os scripts na parte inferior da página (antes da tag </body>) para obter seu HTML e CSS para o usuário o mais rápido possível. O navegador poderá renderizar a página muito mais rapidamente e, em seguida, os scripts poderão ser carregados, em vez de deixar uma página em branco para o usuário olhar enquanto aguarda o download dos scripts.

Enquanto o navegador estiver processando progressivamente a página, se ela atingir uma tag de script (ou seja, um arquivo JavaScript externo) tudo para. Os scripts têm o direito de passagem - enquanto um script está sendo baixado, o navegador não inicia nenhum outro download. ou seja, imagens e folhas de estilo e qualquer outro download paralelo serão bloqueados, mesmo em nomes de host diferentes.

A desvantagem de colocar scripts na parte inferior da página é que, como a página será renderizada antes da inicialização dos scripts, os cliques rápidos poderão interagir com seu site antes que o Javascript esteja pronto.

Nota: O oposto é verdadeiro para as folhas de estilo - as folhas de estilo próximas à parte inferior da página bloqueiam a renderização progressiva até que todas as folhas de estilo tenham sido baixadas e movidas para o documento HEAD elimina o problema.


Existe um truque interessante para carregar o javascript sem fazer o usuário esperar, você pode criar um elemento <script/> usando o método DOM createElement() e adicioná-lo à página antes do fechamento </body> tag:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

O navegador não inicia o download do script js até que o novo elemento <script/> seja realmente adicionado à página. Após a conclusão do download, o navegador interpreta o código Javascript contido nele.

3
Tom

Sim. Se você colocar scripts na parte inferior, doc.ready (DOMContentLoaded event) não será mais necessário - seu script será executado depois que todo o DOM anterior for carregado de qualquer maneira.

Como os scripts no final melhoram o desempenho (a análise e o carregamento de CSS e imagens em HTML não são bloqueados pelos scripts), recomendo colocar os scripts na parte inferior, em vez de usar doc.ready.

1
Kornel