Performance Front-end & Responsive Design

Talk about jQuery and CSS selectors performance and responsive design.

Transcript

1. Performance Front-end Porque se preocupar?
2. 80% Do carregamento/download de uma aplicação web é exclusivo de componentes client-side: JavaScript, Imagens, CSS, HTML, XHR, Fonts etc...
3. Round Trip Time (RTT) É o tempo que o Navegador(Browser) leva para enviar uma requisição para o Servidor e o tempo que Servidor leva para retornar a requisição para o Browser. DNS - Endereço TCP - Conexão HTTP - Resposta html
4. Comparativo dos navegadores atuais:
5. O Desatre: 12 Request
6. O Desatre II: 9 Request (3 Versões diferentes de jQuery)
7. Otimizando:
8. Boas práticas para melhora de performance: - Compactar JavaScript. - Compactar CSS. - Compactar HTML - Otimizar imagens. - Reduzir requests HTTP. - CSS sempre no topo da página - JS sempre no rodapé. - Utilizar GET para requisição Ajax. - Remover redundância no CSS. - Utilizar jQuery com moderação. jQuery 1.9.1 490b jQuery 1.9.1 min 91kb iview 187b iview min 28kb Ex: Fonte: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
9. Entendendo um pouco de CSS: “O browser renderiza o CSS da direita para esquerda.”
10. Casos comuns:
11. jQuery + seletor css redundante = baixa performance.
12. jQuery + seletor css efetivo = melhora na performance.
13. jQuery + seletor css efetivo = alta performance.
14. Comparativo:
15. Realidade.
16. Realidade. *Trendlabs Uso do Smartphone
17. Perfil do usuário de smartphone.
19. Mas o que é Responsive Design ?
27. Layout Flexível Imagens Media Queries Viewport Navegador Os Mobile First target - context - result Polyfill Media Flexível HTML CSS JS DOM Retina
28. Frameworks - Sim ou Não? http://graphicdesignjunction.com/2013/02/25-useful-responsive-frameworks-for-front-end-design/ Twitter Bootstrap | Foundation | Skeleton
29. - Simples - Leve (3kb) - Baixa Curva de Aprendizado - Atualizado - Código Livre - Less - Modular - Grunt.js, Yeoman - Node.js
30. E agora?
31. RESS - Responsive Design With Server-Side Components Responsive - Adaptivo - Mobile