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

26

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 resto da página tenha sido 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?

javascript performance jquery

— DisgruntledGoat
fonte

Estou tendo o problema inverso. Eu tenho um script que cria e posiciona uma barra lateral, mas infelizmente a página está sendo renderizada antes da execução do meu script, resultando em um empurrão feio à medida que os elementos da página são redesenhados nos novos locais. É possível bloquear a renderização até que meu script seja concluído ou fazer com que meu tamanho e posição sejam executados antes da primeira renderização?

3

Esta questão não pertence mais ao StackOverflow?

— Marco Demaio 31/03

30

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 é carregado, seja no início ou no final.

— Callan
fonte

6

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.

— Macha
fonte

3

Um script não tem uso real até que o HTML termine de carregar - um script não pode alterar o DOM até que o HTML seja carregado. document.readyaguarda 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 </body>tag) 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 está processando progressivamente a página, se ela atingir uma tag de script (ou seja, um arquivo Javascript externo) tudo pára . 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 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 movê-las para o documento HEADelimina o problema.

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

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 <script/>elemento seja realmente adicionado à página. Após a conclusão do download, o navegador interpreta o código Javascript contido nele.

— Tom
fonte

11

Não é inteiramente verdade. O script pode alterar o DOM antes de todo o HTML ser carregado ... De fato, é por isso que os scripts estão bloqueando porque podem alterar a página. Dito isto, em muitos casos, os desenvolvedores não precisam adicionar seu script de 'comportamento' até que o DOM seja carregado.

— Scunliffe 17/07/10

1

Sim. Se você colocar scripts na parte inferior, doc.ready( DOMContentLoadedevento) 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.

— Kornel
fonte