O documento discute técnicas para melhorar o desempenho do front-end de aplicações web, incluindo carregamento assíncrono de scripts, otimização de requisições HTTP, uso de CDNs e caches, e templates jQuery para otimização de dados AJAX. Ele também apresenta as bibliotecas LABjs e jQuery Templates como soluções para esses problemas.

1. Cleber Dantas
@cleberdantas
http://www.cleberdantas.com

2. Agenda
• LABjs
• JQuery Templates

3. Front-End
 Steve Sounders – “80% dos problemas de performance de aplicações Web
estão no Front-end”
 YSlow – Extensão do Firefox para análise de performance nas páginas –
baseado nas 14 regras do livro High Performance Web Sites (existem outros
templates)

4. Front-End
 Regra 1: Minimize HTTP Requests
 Regra 2: Use CDN´s (Content Delivery Network)
 Regra 3: Use “Expires Header“
 Regra 4: Utilize Gzip
 Regra 5: Mova CSS para o topo
 Regra 6: Mova scripts para baixo
 Regra 7: Evite expressões em CSS
 Regra 8: ‘Inlined’ JavaScript e CSS
 Regra 9: Minimize Domínios
 Regra 10: Minimize JavaScript
 Regra 11: Evite Redirecionamentos
 Regra 12: Remova Scritps Duplicados
 Regra 13: Desabilite ETags
 Regra 14: Cache AJAX

5. Carregamento assíncrono de Scripts
 Com JQuery
 $.getScript('@Url.Content("~/Scripts/math.js")')

6. Demo

7. LABjs
 Carregamento assíncrono de scripts elegante
 ~5KB
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js").wait();
</script>

8. Demo

9. Ajax e JQuery Templates
 Otimização do trafego de dados entre servidor e
cliente (navegador)
 Trafegar a menor quantidade possível de dados nas
requisições
 jQuery e JSON (JavaScript Object Notation) torna isso
muito fácil
 jQuery Templates (templates de HTML pré carregados
nas páginas)

10. Demo

11. Links
 http://labjs.com/
 http://api.jquery.com/category/plugins/templates/
 http://tecnologia.minhavida.com.br
 http://www.cleberdantas.com