Transferir como ODP, PPTX
![<html>
<head>
[...]
</head>
<body>
<div id="header">
[...]
</div>
<div id="content">
[...]
</div>
<div id="footer">
[...]
</div>
</body>
</html>
1
2
4
3](https://image.slidesharecdn.com/javascriptparaadultos-phpconf2010-101129101837-phpapp01/75/Javascript-para-adultos-29-2048.jpg)
![<form class="follow" action="/user/follow" method="post">
<input type="submit" />
</form>
[...]
<script type="text/javascript">
yahoo.util.setFormAjax($(".follow"));
</script>](https://image.slidesharecdn.com/javascriptparaadultos-phpconf2010-101129101837-phpapp01/75/Javascript-para-adultos-35-2048.jpg)
Carregado porGuilherme Blanco
Javascript para adultos
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.
Mais conteúdo relacionado
Semelhante a Javascript para adultos
Javascript para adultos
- 1. Conf JavaScript para Adultos GuilhermeBlanco JavaScript para Adultos Guilherme Blanco Photo by Ray ThomasPhoto by Ray Thomas Conf
- 2. Guilherme Blanco ● Desenvolvedor10+ anos ● Evangelista OpenSource ● Contribui para... ● Doctrine ● Symfony ● Zend Framework ● PHP @guilhermeblanco http://github.com/guilhermeblanco
- 3. O que éum navegador web?
- 5. Tudo é umaquestão de percepção entre Performance & Accessibilidade
- 6.
- 7.
- 8.
- 9.
- 10. HTMLHTML CSSCSS Inline CSSInline CSS InlineJSInline JS Done!Done! Bloqueia Renderização Bloqueia Renderização e Downloads
- 11.
- 12.
- 13.
- 14.
- 15. Combinando JS eCSS ● Separação de scripts eficiente Doloto – Microsoft Research http://research.microsoft.com/en-us/projects/doloto/
- 16. JSLint / GoogleClosure compiler
- 17. Técnicas de cargasob demanda ● XHR eval ● XHR injection ● Script ou IFRAME ● Script DOM element ● Script defer
- 18.
- 19. Flash Of UnstyledContent (FOUC)
- 20. JavaScript na base(bottom)
- 21. JavaScript na base ●Tolerância à falha ● CNAME para download paralelo ● Minificar JavaScript
- 22.
- 23. Gzip componentes ● HTML,CSS e JavaScript ● Request ● Response AcceptEncoding: gzip, deflate ContentEncoding: gzip Vary: AcceptEncoding,UserAgent
- 24.
- 25.
- 26. Chunked responses ● Mecanismodo 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> <divid="footer"> [...] </div> </body> </html> 1 2 4 3
- 30.
- 31.
- 32.
- 33.
- 34. <a href="#" class="follow"onclick="follow(...);"> Follow </a>
- 35.
- 36.
- 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.
- 39. Template Binding ● HTMLdireto 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.