Onde é o melhor lugar para colocar o código Jquery (ou separar o arquivo Jquery)? As páginas serão carregadas mais rapidamente se eu colocá-lo no rodapé?
Em quase todos os casos, é melhor colocar todas as referências de script no final da página, pouco antes </body>.
Se você não conseguir fazer isso devido a problemas de modelo e outros enfeites, decore suas tags de script com o deferatributo para que o navegador saiba fazer o download dos seus scripts após o download do HTML:
Existem alguns casos extremos, no entanto, nos quais você pode experimentar oscilações da página ou outros artefatos durante o carregamento da página, que geralmente podem ser resolvidos simplesmente colocando as referências de script do jQuery na <head>tag sem o deferatributo Esses casos incluem a interface do usuário do jQuery e outros complementos, como jCarousel ou Treeview, que modificam o DOM como parte de sua funcionalidade.
Advertências adicionais
Existem algumas bibliotecas que devem ser carregadas antes do DOM ou CSS, como polyfills. Modernizr é uma dessas bibliotecas que deve ser colocada na etiqueta principal .
Bem, considere o seguinte: themeforest.net/item/portfolious-professional-business-template/… . É um tema de site que comprei recentemente, que apresenta em sua página inicial o uso do jQuery com o jCarousel. Quando movi os blocos de script da cabeça para o final do arquivo, notei que as imagens usadas no carrossel seriam exibidas de uma só vez durante o carregamento da página, enquanto que quando os arquivos de script estavam na cabeça, a página carregava mais suavemente.
Chad Levy
5
Use CSS para definir o estado inicial do conteúdo. CSS deve ir na cabeça. Quebrar algo para fazer outra coisa funcionar não é a solução. Se um visitante precisar aguardar o jQuery e todos os plug-ins associados carregar antes que qualquer conteúdo seja renderizado, ele poderá não ficar o tempo suficiente para ver o conteúdo.
Duncan
9
O ChadLevy está certo: existem algumas condições sob as quais os plugins jQuery funcionam melhor se forem mencionados no <head>. Se a sua marcação depende do plug-in jQuery que classifica o conteúdo para você, não faz sentido colocar a referência do plug-in na parte inferior da página, pois você receberá uma marcação interessante em sua página da web até que os plug-ins sejam carregados. As regras devem ser seguidas até que não funcionem mais, quando as regras devem ser quebradas.
Robert Harvey
2
@ Duncan: Idealmente, este seria o caso em que você pode controlar todas as dependências. O problema do jQuery (mais especificamente coisas como a interface do usuário do jQuery e outros complementos) é que, por design, você não pode ter controle completo sobre sua funcionalidade; portanto, adicionar algo como atributos de visibilidade a um elemento DOM para que ele carregue com mais facilidade pode não ser possível se um complemento que use esse elemento não levará em consideração o referido atributo. Às vezes, é melhor desafiar uma convenção simples do que tentar obter uma dependência para funcionar da maneira que você deseja.
Chad Levy
2
@ Stefan: Se seus plugins jQuery não têm permissão para manipular o DOM, então qual é o objetivo?
O problema causado pelos scripts é que eles bloqueiam downloads paralelos. A especificação HTTP / 1.1 sugere que os navegadores baixem não mais que dois componentes em paralelo por nome de host. Se você exibir suas imagens a partir de vários nomes de host, poderá obter mais de dois downloads em paralelo. Enquanto um script está sendo baixado, no entanto, o navegador não inicia outros downloads, mesmo em nomes de host diferentes. Em algumas situações, não é fácil mover scripts para o final. Se, por exemplo, o script usar document.write para inserir parte do conteúdo da página, ele não poderá ser movido para baixo na página. Também pode haver problemas de escopo. Em muitos casos, existem maneiras de solucionar essas situações.
Uma sugestão alternativa que costuma surgir é usar scripts adiados. O atributo DEFER indica que o script não contém document.write e é uma pista para os navegadores que eles podem continuar renderizando. Infelizmente, o Firefox não suporta o atributo DEFER. No Internet Explorer, o script pode ser adiado, mas não tanto quanto desejado. Se um script puder ser adiado, ele também poderá ser movido para a parte inferior da página. Isso fará com que suas páginas da web sejam carregadas mais rapidamente.
EDIT: O Firefox suporta o atributo DEFER desde a versão 3.6.
Eu já vi alguns conselhos modernos de que os scripts de estados devem ser colocados no topo. A colocação dos scripts na parte inferior permite que as imagens e outros conteúdos no corpo da página sejam carregados em paralelo, mas efetivamente faz com que os scripts da página sejam carregados posteriormente - todo o corpo HTML precisa ser baixado antes que o navegador saiba sobre os URLs de script a serem carregados. A maioria das pessoas faz referência ao guia do Yahoo, que não é mais preciso - o Firefox realmente honra atributos adiados em scripts. O adiamento na parte superior resultará em um carregamento mais rápido da página, se você o medir.
shadowchaser
Posso ver algumas estatísticas nas velocidades de carregamento da página com este método?
Atualização: desde o início / meados de 2016, todos os navegadores modernos aumentaram o número de conexões por nome de host para pelo menos 6. #
Night Owl
32
Carregue apenas o jQuery na cabeça, via CDN, é claro.
Por quê? Em alguns cenários, você pode incluir um modelo parcial (por exemplo, trecho de formulário de login do ajax) com código dependente do jQuery incorporado; se o jQuery for carregado na parte inferior da página, você receberá um erro "$ não está definido", bom.
É claro que existem maneiras de contornar isso (como não incorporar nenhum JS e anexar a um pacote js de carregamento na parte inferior), mas por que perder a liberdade dos js carregados com lentidão, de poder colocar o código dependente do jQuery em qualquer lugar ? O mecanismo Javascript não se importa com a localização do código no DOM, desde que as dependências (como o jQuery sendo carregado) sejam satisfeitas.
Para seus arquivos js comuns / compartilhados, sim, coloque-os antes </body>, mas, com exceção das exceções, nas quais realmente faz sentido a manutenção de aplicativos aplicar um snippet dependente de jQuery ou uma referência de arquivo ali naquele ponto do html, faça-o.
Não há desempenho atingido carregando jquery na cabeça; qual navegador do planeta ainda não possui o arquivo jQuery CDN no cache?
Muito barulho por nada, coloque jQuery na cabeça e deixe sua liberdade de reinar.
muitos, muitos navegadores não; cerca de 2% é o valor mais alto que eu li, quando você leva em conta a versão e o fato de o cache ser baseado em nomes de recursos exatos, portanto, o jquery1.4.2 não é o mesmo que jquery1.7 ou 1.9.1 ou .. .
Toni Leigh
Desses 2%, digamos, metade sairá antes que a página seja carregada pela primeira vez. Dessa forma, você está perdendo 1%visitantes, mas potencialmente economizando muito tempo e problemas de desenvolvimento. Veja se isso faz sentido com o seu modelo de negócio ...
osa
13
O Nimbuz fornece uma explicação muito boa do problema envolvido, mas acho que a resposta final depende da sua página: o que é mais importante para o usuário ter mais cedo - scripts ou imagens?
Existem algumas páginas que não fazem sentido sem as imagens, mas possuem apenas scripts menores e não essenciais. Nesse caso, faz sentido colocar os scripts na parte inferior, para que o usuário possa ver as imagens mais cedo e começar a entender a página. Outras páginas contam com scripts para funcionar. Nesse caso, é melhor ter uma página de trabalho sem imagens do que uma página que não seja de trabalho com imagens, por isso faz sentido colocar os scripts no topo.
Outra coisa a considerar é que os scripts geralmente são menores que as imagens. Obviamente, isso é uma generalização e você precisa ver se isso se aplica à sua página. Se isso acontecer, então, para mim, é um argumento para colocá-las em primeiro lugar como regra geral (ou seja, a menos que haja uma boa razão para fazer o contrário), porque elas não atrasam as imagens tanto quanto as imagens atrasariam os scripts. Por fim, é muito mais fácil ter scripts no topo, porque você não precisa se preocupar se eles ainda estão carregados quando precisar usá-los.
Em resumo, costumo colocar os scripts no topo por padrão e apenas considero se vale a pena movê-los para o fundo após a conclusão da página. É uma otimização - e não quero fazê-lo prematuramente.
Você me teve até arrastar o argumento da otimização prematura. Essa é apenas outra regra que as pessoas seguem dogmaticamente sem entender completamente suas implicações.
Robert Harvey
6
Oh, bem, não posso vencer todos eles! Eu acredito que entendo suas implicações. :)
EMP
Não tenho certeza se você precisa se preocupar se seus scripts foram carregados. A renderização bloqueia até que um script seja carregado, e é disso que trata a maior parte desta discussão. Então, desde que você não ligue para nada antes de carregá-lo, você estará bem. Além disso, é para isso que servem os retornos de chamada e você realmente não deve incorporar muito mais à sua página. Pelo que entendi, as imagens não bloqueiam (elas carregam em paralelo) e, de fato, o DOM pode estar pronto e seus scripts sendo executados antes que as imagens sejam completamente carregadas. Não faz sentido colocar os scripts em primeiro lugar apenas para evitar que sejam bloqueados.
Duncan
4
Dado que o consenso geral é colocar os scripts na parte inferior, não seria melhor fazer isso por padrão e apenas movê-los para o topo se você tiver problemas? Parece estranho fazer as coisas ao contrário. Às vezes é melhor para fazer a coisa ótima se não há diferença no esforço despendido :)
Duncan
@ Duncan, Sim, essa foi a minha abordagem. Coloquei os plug-ins na parte inferior e, quando tive problemas, coloquei-os no topo, e isso resolveu os problemas.
Robert Harvey
6
A maioria dos códigos jquery é executada em um documento pronto, o que não acontece até o final da página. Além disso, a renderização da página pode ser atrasada pela análise / execução de javascript, portanto, é uma boa prática colocar todo o javascript na parte inferior da página.
A prática padrão é colocar todos os seus scripts na parte inferior da página, mas eu uso o ASP.NET MVC com vários plug-ins jQuery e acho que tudo funciona melhor se eu colocar meus scripts jQuery na <head>seção do mestre página.
No meu caso, existem artefatos que ocorrem quando a página é carregada, se os scripts estiverem na parte inferior da página. Estou usando o plugin jQuery TreeView e, se os scripts não forem carregados no início, a árvore será renderizada sem as classes CSS necessárias impostas pelo plug-in. Assim, você fica com essa bagunça engraçada quando a página é carregada pela primeira vez, seguida pela renderização adequada do TreeView. Muito feio. Colocar os plug-ins do jQuery na <head>seção da página principal elimina esse problema.
As intranets não estão sujeitas às mesmas condições da Internet, portanto o atraso de carregamento é provavelmente menos perceptível. Ainda é aconselhável seguir as regras, no entanto.
Duncan
não, colocar os identificadores / estilos CSS na marcação (em vez de esperar pelo jQuery fazê-lo no DOM pronto) resolve o problema.
Dan feixe
1
@ Dan Beam: O Treeview é preenchido a partir de uma tabela de banco de dados, e os estilos do Treeview são definidos pelo plug-in Treeview com base no conteúdo da tabela, portanto não, isso não funcionará.
Robert Harvey
1
Por que eu faria isso quando apenas colocava o script do Treeview Plugin não modificado na parte superior da página e ele funciona muito bem? Isso não faz sentido, Dan.
Robert Harvey
1
Felicidades Robert, também estou usando o ASP.NETMVC com formulários parciais. Faz sentido manter o javascript dentro da parcial, pois os novos campos recebem suas funcionalidades novamente cada vez que a parcial é executada (por exemplo, para validação). Eu só enfrentei problemas com isso ao tentar usar @Html.Action, que grava dinamicamente um resultado na saída, pois meu parcial dá $ is undefinedsignificado, em vez disso, tenho que usar .load ('@ Url.Action') para carregar o parcial. Mas isso dá um problema devido ao pedido extra. Com base nas suas informações, moverei o jquery acima do RenderBody () na minha página mestre
Malkin
4
Embora quase todos os sites ainda coloquem o Jquery e outro javascript no cabeçalho: D, verifique o stackoverflow.com.
Eu também sugiro que você coloque antes da etiqueta final do corpo. Você pode verificar o tempo de carregamento após a colocação em qualquer um dos lugares. A tag Script irá pausar sua página da Web para carregar ainda mais.
e depois de colocar o javascript no rodapé, você poderá obter uma aparência incomum da sua página da web até carregar o javascript, então coloque o css na seção do cabeçalho.
Para mim, o jQuery é um pouco especial. Talvez uma exceção à norma. Existem muitos outros scripts que dependem dele, por isso é muito importante que seja carregado cedo, para que os outros scripts que virão depois funcionem conforme o esperado. Como alguém apontou, mesmo esta página carrega o jQuery na seção principal.
Respostas:
Todos os scripts devem ser carregados por último
Em quase todos os casos, é melhor colocar todas as referências de script no final da página, pouco antes
</body>.Se você não conseguir fazer isso devido a problemas de modelo e outros enfeites, decore suas tags de script com o
deferatributo para que o navegador saiba fazer o download dos seus scripts após o download do HTML:Casos de borda
Existem alguns casos extremos, no entanto, nos quais você pode experimentar oscilações da página ou outros artefatos durante o carregamento da página, que geralmente podem ser resolvidos simplesmente colocando as referências de script do jQuery na
<head>tag sem odeferatributo Esses casos incluem a interface do usuário do jQuery e outros complementos, como jCarousel ou Treeview, que modificam o DOM como parte de sua funcionalidade.Advertências adicionais
Existem algumas bibliotecas que devem ser carregadas antes do DOM ou CSS, como polyfills. Modernizr é uma dessas bibliotecas que deve ser colocada na etiqueta principal .
fonte
<head>. Se a sua marcação depende do plug-in jQuery que classifica o conteúdo para você, não faz sentido colocar a referência do plug-in na parte inferior da página, pois você receberá uma marcação interessante em sua página da web até que os plug-ins sejam carregados. As regras devem ser seguidas até que não funcionem mais, quando as regras devem ser quebradas.Coloque os scripts na parte inferior
EDIT: O Firefox suporta o atributo DEFER desde a versão 3.6.
Fontes:
fonte
Carregue apenas o jQuery na cabeça, via CDN, é claro.
Por quê? Em alguns cenários, você pode incluir um modelo parcial (por exemplo, trecho de formulário de login do ajax) com código dependente do jQuery incorporado; se o jQuery for carregado na parte inferior da página, você receberá um erro "$ não está definido", bom.
É claro que existem maneiras de contornar isso (como não incorporar nenhum JS e anexar a um pacote js de carregamento na parte inferior), mas por que perder a liberdade dos js carregados com lentidão, de poder colocar o código dependente do jQuery em qualquer lugar ? O mecanismo Javascript não se importa com a localização do código no DOM, desde que as dependências (como o jQuery sendo carregado) sejam satisfeitas.
Para seus arquivos js comuns / compartilhados, sim, coloque-os antes
</body>, mas, com exceção das exceções, nas quais realmente faz sentido a manutenção de aplicativos aplicar um snippet dependente de jQuery ou uma referência de arquivo ali naquele ponto do html, faça-o.Não há desempenho atingido carregando jquery na cabeça; qual navegador do planeta ainda não possui o arquivo jQuery CDN no cache?
Muito barulho por nada, coloque jQuery na cabeça e deixe sua liberdade de reinar.
fonte
2%, digamos, metade sairá antes que a página seja carregada pela primeira vez. Dessa forma, você está perdendo1%visitantes, mas potencialmente economizando muito tempo e problemas de desenvolvimento. Veja se isso faz sentido com o seu modelo de negócio ...O Nimbuz fornece uma explicação muito boa do problema envolvido, mas acho que a resposta final depende da sua página: o que é mais importante para o usuário ter mais cedo - scripts ou imagens?
Existem algumas páginas que não fazem sentido sem as imagens, mas possuem apenas scripts menores e não essenciais. Nesse caso, faz sentido colocar os scripts na parte inferior, para que o usuário possa ver as imagens mais cedo e começar a entender a página. Outras páginas contam com scripts para funcionar. Nesse caso, é melhor ter uma página de trabalho sem imagens do que uma página que não seja de trabalho com imagens, por isso faz sentido colocar os scripts no topo.
Outra coisa a considerar é que os scripts geralmente são menores que as imagens. Obviamente, isso é uma generalização e você precisa ver se isso se aplica à sua página. Se isso acontecer, então, para mim, é um argumento para colocá-las em primeiro lugar como regra geral (ou seja, a menos que haja uma boa razão para fazer o contrário), porque elas não atrasam as imagens tanto quanto as imagens atrasariam os scripts. Por fim, é muito mais fácil ter scripts no topo, porque você não precisa se preocupar se eles ainda estão carregados quando precisar usá-los.
Em resumo, costumo colocar os scripts no topo por padrão e apenas considero se vale a pena movê-los para o fundo após a conclusão da página. É uma otimização - e não quero fazê-lo prematuramente.
fonte
A maioria dos códigos jquery é executada em um documento pronto, o que não acontece até o final da página. Além disso, a renderização da página pode ser atrasada pela análise / execução de javascript, portanto, é uma boa prática colocar todo o javascript na parte inferior da página.
fonte
A prática padrão é colocar todos os seus scripts na parte inferior da página, mas eu uso o ASP.NET MVC com vários plug-ins jQuery e acho que tudo funciona melhor se eu colocar meus scripts jQuery na
<head>seção do mestre página.No meu caso, existem artefatos que ocorrem quando a página é carregada, se os scripts estiverem na parte inferior da página. Estou usando o plugin jQuery TreeView e, se os scripts não forem carregados no início, a árvore será renderizada sem as classes CSS necessárias impostas pelo plug-in. Assim, você fica com essa bagunça engraçada quando a página é carregada pela primeira vez, seguida pela renderização adequada do TreeView. Muito feio. Colocar os plug-ins do jQuery na
<head>seção da página principal elimina esse problema.fonte
@Html.Action, que grava dinamicamente um resultado na saída, pois meu parcial dá$ is undefinedsignificado, em vez disso, tenho que usar .load ('@ Url.Action') para carregar o parcial. Mas isso dá um problema devido ao pedido extra. Com base nas suas informações, moverei o jquery acima do RenderBody () na minha página mestreEmbora quase todos os sites ainda coloquem o Jquery e outro javascript no cabeçalho: D, verifique o stackoverflow.com.
Eu também sugiro que você coloque antes da etiqueta final do corpo. Você pode verificar o tempo de carregamento após a colocação em qualquer um dos lugares. A tag Script irá pausar sua página da Web para carregar ainda mais.
e depois de colocar o javascript no rodapé, você poderá obter uma aparência incomum da sua página da web até carregar o javascript, então coloque o css na seção do cabeçalho.
fonte
Pouco antes
</body>é o melhor lugar de acordo com Yahoo Developer Network 's Melhores Práticas para acelerar o seu Web site neste link , faz sentido.A melhor coisa a fazer é testar sozinho.
fonte
Para mim, o jQuery é um pouco especial. Talvez uma exceção à norma. Existem muitos outros scripts que dependem dele, por isso é muito importante que seja carregado cedo, para que os outros scripts que virão depois funcionem conforme o esperado. Como alguém apontou, mesmo esta página carrega o jQuery na seção principal.
fonte