JavaScript para adultos: otimização de performance e acessibilidade
•Transferir como ODP, PDF•
19 gostaram•24,410 visualizações
O documento apresenta técnicas para melhorar o desempenho e acessibilidade de sites, incluindo renderização no navegador, sprites de CSS, combinação de JavaScript e CSS, carga sob demanda e uso de HTML semântico. Também discute template binding para manipulação de DOM no JavaScript.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a JavaScript para adultos: otimização de performance e acessibilidade
Semelhante a JavaScript para adultos: otimização de performance e acessibilidade (20)
Mais de Guilherme Blanco
Mais de Guilherme Blanco (13)
JavaScript para adultos: otimização de performance e acessibilidade
- 1. Conf JavaScript para Adultos Guilherme Blanco JavaScript para Adultos Guilherme Blanco Photo by Ray ThomasPhoto by Ray Thomas Conf
- 2. Guilherme Blanco ● Desenvolvedor 10+ anos ● Evangelista OpenSource ● Contribui para... ● Doctrine ● Symfony ● Zend Framework ● PHP @guilhermeblanco http://github.com/guilhermeblanco
- 3. O que é um navegador web?
- 5. Tudo é uma questão de percepção entre Performance & Accessibilidade
- 6. Sem técnica
- 10. HTMLHTML CSSCSS Inline CSSInline CSS Inline JSInline JS Done!Done! Bloqueia Renderização Bloqueia Renderização e Downloads
- 12. CSS Sprites
- 13. Image maps
- 14. Combinando JavaScript e CSS
- 15. Combinando JS e CSS ● Separação de scripts eficiente Doloto – Microsoft Research http://research.microsoft.com/en-us/projects/doloto/
- 16. JSLint / Google Closure compiler
- 17. Técnicas de carga sob demanda ● XHR eval ● XHR injection ● Script ou IFRAME ● Script DOM element ● Script defer
- 18. CSS no topo
- 19. Flash Of Unstyled Content (FOUC)
- 20. JavaScript na base (bottom)
- 21. JavaScript na base ● Tolerância à falha ● CNAME para download paralelo ● Minificar JavaScript
- 22. Gzip componentes
- 23. Gzip componentes ● HTML, CSS e JavaScript ● Request ● Response AcceptEncoding: gzip, deflate ContentEncoding: gzip Vary: AcceptEncoding,UserAgent
- 26. Chunked responses ● Mecanismo do HTTP/1.1 ● Divide dados de resposta e transmitindo cada chunk com seu tamanho ● Melhor usado quando a estrutura do site está em sincronia com esta estratégia ChunkView http://tools.w3clubs.com/chunkview/chunkview.php
- 29. <html> <head> [...] </head> <body> <div id="header"> [...] </div> <div id="content"> [...] </div> <div id="footer"> [...] </div> </body> </html> 1 2 4 3
- 30. HTML Semântico
- 31. Acessibilidade
- 32. SEO
- 34. <a href="#" class="follow" onclick="follow(...);"> Follow </a>
- 36. JavaScript OO
- 37. yahoo.util = function () { var __construct, setFormAjax, setLinkAjax; __construct = function (context) { // Não faz nada }; setFormAjax = function ($form) { // Implementação aqui }; setLinkAjax = function ($link) { // Implementação aqui }; return (function () { var self = { setFormAjax: setFormAjax, setLinkAjax: setLinkAjax }; __construct(self); return self; })(); };
- 38. Template Binding
- 39. Template Binding ● HTML direto no JS ● Manipulação de DOM no JS ● Clonar um elemento template Jquery Template http://api.jquery.com/jQuery.template/
- 40. Template Binding <script id="summaryTpl" type="text/xjquerytmpl"> <li>${Name}</li> </script> function renderList() { // Template será compilado somente uma vez. $( "#summaryTpl" ) .tmpl( movies ) .appendTo( "#moviesList" ); }
- 41. Perguntas?