Uma das regras de melhores práticas para otimizar a perfomance de um site, de acordo com o Yahoo é colocar a tag script logo antes do fechamento da tag body do documento. Existe uma falha em fazer esta afirmação como regra.

Quando a página é carregada, o Browser ao carregar a tag script interrompe o processamento do restante do documento até que ele seja carregado completamente. Sendo assim, parece lógico você utilizar a tag script na parte inferior do documento ao invés do inseri-la no head (o mais utilizado). Desta forma o browser renderiza completamente, deixando para renderizar o script logo após a página ser carregada, dando uma reposta ao usuário mais rápida.

Situações como o Google Analitics, que orienta o usuário a inserir o script (captação para obter as estatísticas da página) na parte inferior, isto se aplica da forma correta, pois a página é carregada sem que o script do Google cause o decrescimento de perfomance no site. No entanto, no caso onde o script a ser carregado contém alguma interação com o usuário, este caso não deve ser aplicado pois se a página for renderizada ele está apto a interagir e clicar em links que possui eventos que não foram atribuidos a aquele elemento podem comprometer ao uso do site. Desta forma, o usuário pode interagir no momento inapropriado e não ter a experiência esperada do sistema.

A perfomance não deve afetar a integridade do sistema, então neste caso precisa ser balanceada. Mesmo sendo uma prática ditada pela Yahoo, ela possui esta grande falha e devemos saber dicernir melhores práticas para tomar decisões para melhorar perfomance.

Dependendo do tamanho dos scripts, a diferença de perfomance é considerável. Para tentar minimizar este problema, eu utilizo o carregamento de scripts sob demanda que desenvolvi para não carregar scripts desnecessários na página que muitas vezes nem use algum plugin do jQuery ou biblioteca exterior.

2 Replies to “Onde colocar a tag script?”

  1. Olá, autor.

    Sou especialista em desenvolvimento de front-end e tenho bastante experiência com JavaScript. Gostaria de fazer uma crítica a esse post; tentarei ser o menos prolixo possível (serei direto).

    Essa “dica” do Yahoo! não é falha. Ela se aplica sim – ou, infelizmente, deveria se aplicar – em todos os casos. O motivo o qual você usa para julgar essa dica é inválido, uma vez que não deveríamos inserir comportamento no conteúdo (“eventos nos links”?).

    É tudo uma questão de filosofia: assim como existe o conceito de MVC para server-side, existe também um conceito de desenvolvimento em camadas para client-side, o CSB (Content-Style-Behavior) – também tem outros nomes por aí. De acordo com esse conceito/filosofia (o qual aplico em todos os meus projetos web), deveríamos separar *completamente* markup de behavior – isso inclui não usar eventos inline (onclick, onisso, onaquilo) [1].

    Se esse padrão de organização for aplicado rigorosamente (garanto que vale muito a pena fazer isso), é possível usar a dica do Yahoo! assim como descrevi no meu blog [2]. Isso aumenta a facilidade de manutenção, performance da página, etc.

    Qualquer coisa, sou fácil de achar na web. 😉

    Links
    [1]: http://www.quirksmode.org/js/events_early.html
    [2]: http://emyller.net/blog/take-the-script-out-of-your-head/

  2. @Evandro: Bem, nada do que eu disse e recomendo tem haver com inserir eventos inline. Não critiquei as dicas do Yahoo de um modo geral, mas sim desta regra específica que não abrange inserir eventos no html, ou seja, sempre recomendei javascript não obstrusivo. Esta regra é somente em relação a onde inserir a tag script com blocos de código javascript e script externos.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *