#JSConfBR – Segunda palestra com Sérgio Lopes

Tudo o que você precisa saber sobre JS carregamento e execução no navegador.

A Segunda palestra do JSConfBR foi muito legal, particulamente uma das que eu mais curti, foi totalmente focada em peformace e esclareceu duvidas interesssantes sobre como o javascript é executado na página e como tornar sua execução o mais rapida possivel.

No carregamento da página, quando o browser identifica uma tag script, ele pausa a renderização até acabar de processar o script, para então seguir com a renderização. Por isso é muito comum os desenvolvedores colocarem o script no final da página para que quando o navegador trave a execução o conteúdo em si já esteja carregado.

Na palestra foram citadas outras técnicas como o uso do defer que quando usado no script, adia a execução do código até o carregamento completo do dom. Esse script foi implementado pela microsoft e posteriormente virou padrão em todos os navegadores, infelismente foi dito também que esta técnica apresenta alguns erros de execução no IE, onde as vezes ele não guarda a ordem em que os scripts foram dispostos. Ironico não?

Latência

Colocar o script no final do código resolve um problema, mas não todos, a latência é um dos grandes vilões em performance no browser. Todo navegador tem um limite de downloads simultâneos em um mesmo domínio. Então caso grandes quantidades de scripts sejam chamados,  existe a chance de que o carregamento dos primeiros bloqueiem o carregamento dos próximos. (Em um cenário que teríamos algo em torno de 16 scripts e o navegador só baixa 8 por vez.)

A solução mais óbvia seria juntar todos os scripts em um mesmo documento e chamá-lo apenas uma vez. Isso resolveria mas não seria o mais indicado, justamente por perder a vantagem do download simultâneo dos navegadores. Na palestra foi aconselhado estudar o projeto em qual se vai implementar essas técnicas e decidir em quantos arquivos os scripts podem estar despostos.

Assync

Então fomos para o carregamento assíncrono, que consiste em carregamento do script sem barrar a renderização do html. A Técnica usava o atributo async no script permitindo o download assíncrono porem comprometendo o uso de dependências já que um script poderia carregar antes de outro script essencial ao desenvolvimento. Para tentar corrigir este problema foram mostradas diversas técnicas, desde a mudança do type do script para algo aleatório (gambiarra) a carregar o script usando um load de img em javascript (uma gambiarra maior ainda).

ScriptLoaders

Foi explicado também sobre scripts loaders, que são scripts que ajudam a gerenciar o carregamento dos scripts. Foram citados o Lab.js e header.js como sugestão para uso.

Prefetch e Preload também foram citados, atributos rel utilizados em linsk para ajudar na manipulação de recursos. Esses links funcionam como uma especie de cache, o navegador faz o download dos recursos citados para uso futuro. A Desvantagem e que os arquivos citados no <link rel=”prefetch preload”> tem uma prioridade mais baixa na ordem de download no navegador.

Dependências

Foi explicado rapidamente como solucionar os problemas com dependência (que é diferente de ordem) usando AMD (Asynchronous mudule definition) e Async Dependency execution usando  o require.js.

Na apresentação, rolou algumas comparações entre as técnicas citadas nas páginas, usando paginas com 200 scripts, além de algumas observações sobre o uso de módulos (Nada aprofundada pois iria rolar uma palestra sobre modularizarão no mesmo evento).

Links uteis:

http://requirejs.org/

http://en.wikipedia.org/wiki/Asynchronous_module_definition

http://labjs.com/

http://zenorocha.com/html5-async-scripts/

 

One comment

  1. Pingback: JsconfBR in fortaleza #jsconfbr | Claudio Felis

Post a comment

* Copy This Password *

* Type Or Paste Password Here *

14,971 Spam Comments Blocked so far by Spam Free Wordpress

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>