$ (documento) .ready (função () {}); vs script na parte inferior da página

Respostas:

142

Muito pouco por si só, de qualquer forma o DOM estará pronto para você operar (eu estava nervoso com isso até ler no Google ). Se você usar o truque do fim da página, seu código pode ser chamado um pouco antes, mas nada que importe. Mas, o mais importante, essa escolha está relacionada a onde você vincula seu JavaScript à página.

Se você incluir sua scripttag no heade depender ready, o navegador encontrará sua scripttag antes de exibir qualquer coisa para o usuário. No curso normal dos eventos, o navegador para de repente e faz o download do seu script, dispara o interpretador JavaScript e entrega o script para ele, em seguida, espera enquanto o interpretador processa o script (e então jQuery observa de várias maneiras para que o DOM esteja pronto). (Digo "no curso normal das coisas" porque alguns navegadores suportam os atributos asyncoudefer nas scripttags.)

Se você incluir sua scripttag no final do bodyelemento, o navegador não fará tudo isso até que sua página já esteja amplamente exibida para o usuário. Isso melhora o tempo de carregamento percebido para sua página.

Portanto, para obter o melhor tempo de carregamento percebido, coloque seu script na parte inferior da página. (Essa também é a orientação do pessoal do Yahoo .) E se você vai fazer isso, não há necessidade de usar ready, embora, é claro, você pudesse, se quisesse.

Porém, há um preço para isso: você precisa ter certeza de que as coisas que o usuário pode ver estão prontas para interagir. Ao mover o tempo de download para depois que a página for amplamente exibida, você aumenta a possibilidade de o usuário começar a interagir com a página antes que seu script seja carregado. Esse é um dos contra-argumentos para colocar a scripttag no final. Freqüentemente, não é um problema, mas você precisa olhar para sua página para ver se é e, em caso afirmativo, como deseja lidar com isso. (Você pode colocar um pequeno elemento embutido script no headque configura um manipulador de eventos em todo o documento para lidar com isso. Dessa forma, você obtém o tempo de carregamento aprimorado, mas se eles tentam fazer algo muito cedo, você pode dizer isso a eles ou, melhor, enfileirar o que eles queriam fazer e fazer quando seu script completo estiver pronto.)

TJ Crowder
fonte
17
+1. Outra maneira de lidar com a interação antes que o js seja carregado é fazer a página funcionar sem javascript para começar. Certifique-se de que todos os links funcionam, etc., embora eles acionem o recarregamento da página. Em seguida, sequestrar os links e outras coisas com js e adicionar seu ajax ou outros sinos e assobios :)
Adrian Schmidt
1
Como você lidaria com o enfileiramento de uma ação? Existe um padrão de design ou alguma "solução comum" que eu possa analisar em relação a isso?
HC_
@HC_: O que você quer dizer com "enfileirar uma ação"?
TJ Crowder
@TJCrowder Da última frase de sua resposta: "ou, melhor, enfileire o que eles queriam fazer e faça quando seu script completo estiver pronto." Eu só estava me perguntando se existem maneiras "ideais" de fazer isso, já que tenho certeza de que poderia descobrir "alguma" maneira de fazer isso, mas tenho certeza que seria ... desaprovado se alguém mais olhou para qualquer código envolvido.
HC_
2
@HC_: Nunca senti a necessidade de fazer isso e não conheço nenhum padrão em particular para isso. E cinco anos depois, parece-me melhor apenas ir com "Desculpe, carregando, um segundo ..". (Embora se as coisas são que lento para carregar, você tem um problema maior.) Se eu ver algo que eu acho que é clicável, e clique nele, e nada acontece, só Deus sabe o que eu vou clique em Avançar. Se você os colocar na fila e depois reproduzi-los quando estiver pronto, pode ser ... menos do que o ideal.
TJ Crowder
3

Sua página carregará mais lentamente espalhando $(document).ready()scripts por todo o DOM (em vez de todos no final) porque requer que o jQuery seja carregado de forma síncrona primeiro.

$ = jQuery. Portanto, você não pode usar $em seus scripts sem primeiro carregar o jQuery. Essa abordagem força você a carregar o jQuery próximo ao início da página, o que interromperá o carregamento da página até que o jQuery seja totalmente baixado.

Você também não pode asynccarregar o jQuery porque, em muitos casos, seu $(document).ready()(s) script (s) tentarão executar antes que o jQuery seja totalmente carregado de forma assíncrona e causar um erro, porque, novamente, $ainda não foi definido.

Dito isso, existe uma maneira de enganar o sistema. Definindo essencialmente $igual a uma função que coloca $(document).ready()funções em uma fila / matriz. Em seguida, na parte inferior da página, carregue o jQuery, itere na fila e execute $(document).ready()um de cada vez. Isso permite que você adie o jQuery para o final da página, mas ainda use $acima dele no DOM. Eu pessoalmente não testei como isso funciona bem, mas a teoria é sólida. A ideia já existe há algum tempo, mas muito, muito raramente a vi implementada. Mas parece uma ótima ideia:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Jake Wilson
fonte