[jquery-br] Script no início ou no final da página?

1,720 views
Skip to first unread message

Eduardo Faria

unread,
Apr 22, 2010, 3:26:34 PM4/22/10
to jQuery (Brasil)
Olá, tenho visto em alguns blogs e sites o JavaScript sendo carregado
no início da página entre a tag <head>, porém sempre 'ouço' a
recomendação para sempre colocar o Script o mais próximo possível do
fim da tag <body>, isso acusando ser por motivos de carregamento da
página e, assim, não interferir.
Enfim qual é o melhor jeito? Ou em quais situações cada opção é melhor
situada?

Grato!

--
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/jquery-br?hl=pt-BR.

Alex Silva

unread,
Apr 22, 2010, 5:18:48 PM4/22/10
to jque...@googlegroups.com
Parece que o melhor jeito é realmente no fim da página mesmo
Esses dias tava olhando as regras, do yslow(ou do pagespeed do google) aconselhando colocar la no final mesmo

Andre Fonseca

unread,
Apr 22, 2010, 9:03:27 PM4/22/10
to jque...@googlegroups.com
Se o seu script for muito "pesado" colocá-lo no final da página para não atrapalhar a renderização dos elementos.  Embora seja uma boa coisa, na prática, com os diversos "compiladores" (minimizadores) esse peso é bem reduzido. 

Mas vamos o que os especialistas da lista dizem. 

Abraços
Andre Fonseca

Leo Balter

unread,
Apr 22, 2010, 9:15:29 PM4/22/10
to jque...@googlegroups.com
Isso mesmo. O ideal é sempre CSS no head e JavaScript ao final logo
antes de fechar o body. E lembre-se que o b é chamar um só arquivo de
JavaScript e um de CSS

Em 22/04/10, Andre Fonseca<aoqfo...@gmail.com> escreveu:

Luiz Tiago Oliveira

unread,
Apr 22, 2010, 9:19:16 PM4/22/10
to jque...@googlegroups.com
Discordo em gênero, número e degrau =P

Scripts em arquivos únicos e no final da página são validados e amplamente recomendados por questões de performance. Scripts só são necessários quando todo o html estiver renderizado na formatação correta.

--
Luiz Tiago Oliveira
Instrutor iMedia Brasil | Front-End Engineer | Gerente de Projetos
www.luiztiago.com | luiz...@luiztiago.com

Jaydson Gomes

unread,
Apr 22, 2010, 9:38:02 PM4/22/10
to jque...@googlegroups.com
Esta é uma longa, velha, chata e inútil (no meu ponto de vista) discussão na comunidade Javascript.
Inclusive já foi discutida na lista Javascript Brasil (http://groups.google.com/group/javascript-bra).
Mas enfim, vou tentar explicar o porque eu acho inútil esta discussão.

Em primeiro lugar tem que se analisar a aplicação em questão. Não se pode generalizar e dizer que SEMPRE deve ser carregado no fim da página.
Sim, o Yahoo! recomenda, e tenho o maior respeito por isso. Mas não é uma regra, e sim uma boa prática.
Para um site, talvez seja interessante colocar no final para não afetar no carregamento e tal. Mas mesmo assim, normalmente um arquivo Javascript para um site não é tão pesado ao ponto de interferir no carregamento do resto da página.
Outro fator relevante é que os browsers modernos não carregam uma coisa de cada vez, ou seja, enquanto esta carregando um JS, ele esta carregando ao mesmo tempo um CSS, Imagens, etc.

Agora pensando em um Sistema, não vejo a necessidade (e nem diferença) de colocar no fim, até porque eu só quero executar Javascript quando o DOM estiver todo carregado.
Mas enfim, esta é a opinião de alguém que trabalha com Javascript a bastante tempo, mas não me julgo detentor da sabedoria extrema como alguns. Então fica ai para os mais novos o meu ponto de vista.



2010/4/22 Luiz Tiago Oliveira <luiz...@gmail.com>



--
Jaydson Gomes
Analista/Desenvolvedor Web
http://jaydson.org
http://meadiciona.com/jaydson

Calafrio...

unread,
Apr 22, 2010, 10:14:15 PM4/22/10
to jQuery (Brasil)
Vixe... agora complicou o meio de campo...

Estou acompanhando este tópico e confesso que fiquei perdido.

Sobre isto até onde eu "sabia"(isto mesmo sabia, porque aghora não sei
mais...) o java script deveria estar entre as tag <head></head> por
motivo de o script estar carregado durante sua chamada mas pelo que
vejo aqui estou nos tempos das cavernas...

Alguém poderia complementar estes pontos ou este assunto é para linkar
um .css ou .js???

Att Gilberto



On 22 abr, 22:38, Jaydson Gomes <jayale...@gmail.com> wrote:
> Esta é uma longa, velha, chata e inútil (no meu ponto de vista) discussão na
> comunidade Javascript.
> Inclusive já foi discutida na lista Javascript Brasil (http://groups.google.com/group/javascript-bra).
> Mas enfim, vou tentar explicar o porque eu acho inútil esta discussão.
>
> Em primeiro lugar tem que se analisar a aplicação em questão. Não se pode
> generalizar e dizer que SEMPRE deve ser carregado no fim da página.
> Sim, o Yahoo! recomenda, e tenho o maior respeito por isso. Mas não é uma
> regra, e sim uma boa prática.
> Para um site, talvez seja interessante colocar no final para não afetar no
> carregamento e tal. Mas mesmo assim, normalmente um arquivo Javascript para
> um site não é tão pesado ao ponto de interferir no carregamento do resto da
> página.
> Outro fator relevante é que os browsers modernos não carregam uma coisa de
> cada vez, ou seja, enquanto esta carregando um JS, ele esta carregando ao
> mesmo tempo um CSS, Imagens, etc.
>
> Agora pensando em um Sistema, não vejo a necessidade (e nem diferença) de
> colocar no fim, até porque eu só quero executar Javascript quando o DOM
> estiver todo carregado.
> Mas enfim, esta é a opinião de alguém que trabalha com Javascript a bastante
> tempo, mas não me julgo detentor da sabedoria extrema como alguns. Então
> fica ai para os mais novos o meu ponto de vista.
>
> 2010/4/22 Luiz Tiago Oliveira <luizti...@gmail.com>
>
>
>
>
>
> > Discordo em gênero, número e degrau =P
>
> > Scripts em arquivos únicos e no final da página são validados e amplamente
> > recomendados por questões de performance. Scripts só são necessários quando
> > todo o html estiver renderizado na formatação correta.
>
> > --
> > *Luiz Tiago Oliveira*
> > Instrutor iMedia Brasil | Front-End Engineer | Gerente de Projetos
> >www.luiztiago.com| luizti...@luiztiago.com
>
> >  --
> > Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> > (Brasil)" dos Grupos do Google.
> > Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> > Para cancelar a inscrição nesse grupo, envie um e-mail para
> > jquery-br+...@googlegroups.com<jquery-br%2Bunsubscribe@googlegroups .com>
> > .
> > Para obter mais opções, visite esse grupo em
> >http://groups.google.com/group/jquery-br?hl=pt-BR.
>
> --
> Jaydson Gomes
> Analista/Desenvolvedor Webhttp://jaydson.orghttp://meadiciona.com/jaydson
>
> --
> Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
> Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.
> Para obter mais opções, visite esse grupo emhttp://groups.google.com/group/jquery-br?hl=pt-BR.

Leo Balter

unread,
Apr 22, 2010, 10:37:50 PM4/22/10
to jque...@googlegroups.com
Nada na área de programação deve ser levado ao modo xiita. Se não ousarmos não vamos ter ideias brilhantes. Ainda mais num mundo javascript onde regras podem ser quebradas com quase nenhuma dor de cabeça.

O ideal para o carregamento mais rápido de uma página é ao final da estrutura do body. Isso significa que o html vai ser montado o quanto antes.

Isso é o mais elegante? aí é um ponto que já discordo. Particularmente detesto qualquer javascript dentro do <body>. Isso é pessoal, ninguém deve seguir igual só pq também sigo.

Gosto de olhar para a estrutura html e procurar os links para javascript somente no <head>.

Quanto a carregar o CSS antes do JavaScript isso eu afirmo mesmo. Não tem deselegância, pelo contrário e é um padrão de projeto muito útil, pois muitas das vezes o JavaScript pode fazer alguma manipulação de CSS antes do carregamento da folha de estilo, que se for carregada depois pode sobrepor algo, já vi acontecer, mas é bem raro.

Quanto à usabilidade e padrão de projeto, posso afirmar uma coisa: JavaScript não deve impedir o carregamento da página. Um alert para continuar o carregamento do html é o fim da picada.

Evitar isso é moleza, o jQuery tem um meio ótimo pra isso e um outro pode ser utilizado tanto em jQuery quanto em Javascript puro, são esses 3 métodos (bem conhecidos):

jQuery(document).ready(), jQuery(window).load e window.onload =.

Qualquer um desses métodos serão interessantes pra manter um padrão bom que vai manter a boa velocidade da página.

Por motivos similares que o AJAX tem carreamento assíncrono por default.

Luiz Tiago Oliveira

unread,
Apr 22, 2010, 11:10:37 PM4/22/10
to jque...@googlegroups.com
Para quem quer se aprofundar no conhecimento disto, recomendo a leitura (principalmente o capítulo 8):
http://oreilly.com/catalog/9780596529307

Tem em português também. Basta procurar!

Chapter 8 Rule 6: Put Scripts at the Bottom



2010/4/22 Leo Balter <leonard...@gmail.com>



--
Luiz Tiago Oliveira

Instrutor iMedia Brasil | Front-End Engineer | Gerente de Projetos
www.luiztiago.com | luiz...@luiztiago.com

Luiz Tiago Oliveira

unread,
Apr 22, 2010, 11:12:49 PM4/22/10
to jque...@googlegroups.com
Bons exemplos:

http://stevesouders.com/hpws/rule-js-bottom.php

2010/4/23 Luiz Tiago Oliveira <luiz...@gmail.com>

Ruan Carlos

unread,
Apr 23, 2010, 8:01:54 AM4/23/10
to jque...@googlegroups.com
Sobre esse assunto, todos vão dar a sua opnião e opnião própria,
ninguém vai dizer, tem q ser assim, até pq o js aceita ser no head ou
em qualquer outra parte do body da página.

Tem gente que fala que tem que ser no fim da página pra não atrapalhar
o carregamento dela, mas coloca uma imagem de fundo de 1mb, coisa sem
noção.

Eu simplesmente digo e recomendo, coloca todo o JavaScript no HEAD,
assim todo mundo vai saber onde ele está, vai ser mais fácil a
manutenção e te garanto q com 100 ou 200kb um JavaScript não vai
atrapalhar sua página em nada.

Tem gente que cria páginas que dependem do JavaScript pra funcionar
(eu sou um desses caras) e ai diz, o JavaScript tem que estar no final
da página pro HTML carregar primeiro que o JavaScript.

Faz assim o recomendado é que você faça algo que seja fácil de dar
manutenção. Se for documentado (duvido que seja), de fácil acesso e
interpretação, coloque em qualquer lugar ;)

-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br
Desenvolvedor web



Em 23 de abril de 2010 00:12, Luiz Tiago Oliveira
<luiz...@gmail.com> escreveu:

Suissa

unread,
Apr 23, 2010, 9:13:42 AM4/23/10
to jque...@googlegroups.com
Sou da mesma opiniao do Ruan até pq nem utilizo tantos js, não me
carregam tanto a página então no caso fica mto mais organizado no
head.

2010/4/23 Ruan Carlos <ruan...@gmail.com>:
--
Jean C. Nascimento
Desenvolvedor Web
http://twitter.com/suissacorp

http://www.suissacorp.com.br/

WebDeveloper
http://www.wgbnet.com.br/

Luiz Tiago Oliveira

unread,
Apr 23, 2010, 9:14:55 AM4/23/10
to jque...@googlegroups.com
Eu discordo em partes, mas como o Ruan falou: Cada um tem sua opinião e opinião própria (só faltou o 'de si mesmo'). Eu acho 100/200kb muita coisa p/ carregar e isso dificulta sim o funcionamento da coisa. Sou a favor do uso de js não-obstrutivo. Hoje nós temos diversos dispositivos diferenciados, e não só computadores que o cliente acessa utilizando míseros planos 3G e com dispositivos que nem sempre rodam JS.

Eu já tive um Pocket PC (HP iPAQ), viajei e queria postar algumas coisas no site do twitter que não funcionava pq o navegador do dispositivo não suportava JS. Agora imagina, além de tudo, forçar o cara a baixar 100/200kb num mísero 3G antes mesmo de carregar a página.

2010/4/23 Ruan Carlos <ruan...@gmail.com>

Suissa

unread,
Apr 23, 2010, 9:19:05 AM4/23/10
to jque...@googlegroups.com
Tb acho 100/200kb mto p/ carregar no topo. Se for um layout clean isso
pesa mais q as imagens! Mas como meu js minified + plugins nao xegam a
50k isso eu ja acho suave.
As vezes tb vc NECESSITA que o site soh seja mostrado após o js ser
carregado, pois o usuario pode estar acostumado a fazer alguma função
e eqto estiver carregando ele tentará executar essa ação sem sucesso.

2010/4/23 Luiz Tiago Oliveira <luiz...@gmail.com>:
--
Jean C. Nascimento
Desenvolvedor Web
http://twitter.com/suissacorp

http://www.suissacorp.com.br/

WebDeveloper
http://www.wgbnet.com.br/

Juarez Gonçalves Nery Junior

unread,
Apr 23, 2010, 9:24:46 AM4/23/10
to jque...@googlegroups.com

Ruan Carlos

unread,
Apr 23, 2010, 9:33:59 AM4/23/10
to jque...@googlegroups.com
Eu prefiro perder alguns milisegundos no carregamento da página do que
perder dias para encontrar um arquivo montado dinamicamente em algum
footer perdido por algum lugar de um projeto gigantesco.

Sinceramente, não abro mão de usar o js no HEAD até pq normalmente
tenho apenas a chamada do jquery e de alguns plugins caso necessário
(minimo possível) ou seja, meu header tem 24 kb. O 200kb foi um
exemplo comparado com a imagem de 1mb ;)
-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br
Desenvolvedor web



Em 23 de abril de 2010 10:24, Juarez Gonçalves Nery Junior
<juarez...@gmail.com> escreveu:

Eduardo Faria

unread,
Apr 23, 2010, 1:46:01 PM4/23/10
to jQuery (Brasil)
Agradeço a ajuda de todos e era realmente o que eu esperava ouvir.
Então podemos chegar a uma 'conclusão' de que se o script não depender
do html totalmente carregado e não for tão grande assim e/ou quisermos
seguir um padrão podemos usá-lo entre as tags <head>, caso contrário
pode-se (e idealmente deve-se usar-lo) no fim do <body>.
Levantei essa pergunta, pois ao trabalhar com tabelas e JavaScript era
necessário que ela fosse carregada por completo primeiro antes que eu
pudesse fazer as interações senão ele não interagia era com nada. Aí
decidi mudar meus scripts para o fim da página e comecei a ver muitas
recomendações para isso.
Mais uma vez, grato!

[Moderador] Ruan Carlos

unread,
Apr 23, 2010, 2:26:11 PM4/23/10
to jQuery (Brasil)
Já que se discutiu padrões aqui. Segue uma recomendação usada no Core
do jQuery.

http://docs.jquery.com/JQuery_Core_Style_Guidelines#Type_Checks

Alex Silva

unread,
Apr 23, 2010, 3:01:28 PM4/23/10
to jque...@googlegroups.com
Gostei muito da discução, esse é o tipo de forma de discutir algo, que da vontade de participar.

Agora, levando em conta que colocar os arquivos de js na parte de baixo do site é uma recomendação do todo poderoso google, inclusive no pagespeed deles eles fazem esse teste, isso não vai acabar sendo uma regra SEO e um padrão, já que o google ta levando em consideração a velocidade da página como fator de pagerank?


Abraços

Ruan Carlos

unread,
Apr 23, 2010, 3:10:36 PM4/23/10
to jque...@googlegroups.com
Meu site tem chamadas no HEAD e minha pontuação é 75 > 100 ;)

A vantagem de se colocar dentro do body é a velocidade de carregamento
da página ;).

-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br
Desenvolvedor web



Tanure

unread,
Apr 23, 2010, 3:19:16 PM4/23/10
to jque...@googlegroups.com
aquele que mandei ontem

no topo, com pontuação 96/100

maaas

coloquei todos os js em um arquivo só... mative separados loicalemte, ams juntei no online....

em nenhum momento pediu pra ser no rodape

Stephan A. de Souza

unread,
Apr 23, 2010, 3:22:16 PM4/23/10
to jque...@googlegroups.com
Existem formas de burlar isso usando carregamento assíncrono, como exemplo o próprio Google Analytics dá suporte a isso! ;)

A questão maior não é tamanho e sim quantidade de requisições .JS que o Pagespeed calcula para levar esse fator. Tamanho é fácil reduzir usando por exemplo Pack/Minify somado ao uso de .gz! :D

2010/4/23 Alex Silva <aleee...@gmail.com>



--
Analista de Sistemas Ação Direta : www.acaodireta.com.br | p...@acaodireta.com.br
www.twitter.com/bladed
Administrador HxBr.net
Forum/TeamSpeak Admin ragnaBR.net

Eduardo Faria

unread,
Apr 24, 2010, 6:54:43 PM4/24/10
to jQuery (Brasil)
Nossa! Gostei muito de link do pessoal do jQuery, muito útil esses
padrões.
E quanto à questão de page-rank acho que não interfere de forma
alguma, pois é levado em considerações as relações externas do site e
não sua organização, ou pelo menos em partes.

On 23 abr, 15:26, "[Moderador] Ruan Carlos" <ruanl...@gmail.com>
wrote:

Alex Silva

unread,
Apr 25, 2010, 4:52:06 PM4/25/10
to jque...@googlegroups.com

Eduardo Faria

unread,
Apr 25, 2010, 9:15:13 PM4/25/10
to jQuery (Brasil)
Nossa Alex, dessa ainda eu não sabia. Obrigado pelas fontes que
mostram esses detalhes.

On 25 abr, 17:52, Alex Silva <aleeexsi...@gmail.com> wrote:
> Não só fatores externos não
>
> http://readwriteweb.com.br/2010/04/09/e-oficial-agora-o-google-leva-e...
>
> http://escalabilidade.com/2010/04/22/o-google-quer-seu-site-seja-rapi...
>
> Em 24 de abril de 2010 19:54, Eduardo Faria <eduardofari...@gmail.com>escreveu:
>
>
>
>
>
> > Nossa! Gostei muito de link do pessoal do jQuery, muito útil esses
> > padrões.
> > E quanto à questão de page-rank acho que não interfere de forma
> > alguma, pois é levado em considerações as relações externas do site e
> > não sua organização, ou pelo menos em partes.
>
> > On 23 abr, 15:26, "[Moderador] Ruan Carlos" <ruanl...@gmail.com>
> > wrote:
> > > Já que se discutiu padrões aqui. Segue uma recomendação usada no Core
> > > do jQuery.
>
> > >http://docs.jquery.com/JQuery_Core_Style_Guidelines#Type_Checks
>
> > > --
> > > Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> > (Brasil)" dos Grupos do Google.
> > > Para postar neste grupo, envie um e-mail para jque...@googlegroups.com
> > .
> > > Para cancelar a inscrição nesse grupo, envie um e-mail para
> > jquery-br+...@googlegroups.com<jquery-br%2Bunsubscribe@googlegroups .com>
> > .
> > > Para obter mais opções, visite esse grupo emhttp://
> > groups.google.com/group/jquery-br?hl=pt-BR.
>
> > --
> > Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> > (Brasil)" dos Grupos do Google.
> > Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> > Para cancelar a inscrição nesse grupo, envie um e-mail para
> > jquery-br+...@googlegroups.com<jquery-br%2Bunsubscribe@googlegroups .com>
> > .

Tecsite Estúdio Digital - Santos/SP

unread,
Apr 26, 2010, 2:25:23 AM4/26/10
to jque...@googlegroups.com
rsrs.. Se continuar desse jeito, a gente vai acabar sendo obrigado a desenvolver sites minimalistas se quiser aparecer nas buscas.

Adeus belo efeito em jQuery!

Boa madrugada!

Drika.
--
Miriam de Paula

Desenvolvimento Web
Webstandard/ PHP/ MySQL/ Wordpress
www.tecsite.com.br

MSN: tecsite [at] hotmail.com
Skype: tecsite_suporte
GTalk/ GMail: tecsite [at] gmail.com
Twitter: @tecsiteweb / @miriamdepaula
Perfil Google: http://www.google.com/profiles/tecsite
LinkedIn: http://br.linkedin.com/in/tecsite
Beezzer: http://pt.beezzer.com/tecsite

Perguntas?
http://www.formspring.me/miriamdepaula
http://www.formspring.me/tecsite
----------------------------------------------------------

Reply all
Reply to author
Forward
0 new messages