If you can't read please download the document
Upload
guilherme-blanco
View
26.728
Download
0
Embed Size (px)
Citation preview
Conf
JavaScript para Adultos
Guilherme BlancoPhoto by Ray Thomas
Photo by Ray Thomas
Conf
Guilherme Blanco
Desenvolvedor 10+ anos
Evangelista OpenSource
Contribui para...Doctrine
Symfony
Zend Framework
PHP
@guilhermeblanco
http://github.com/guilhermeblanco
O que um navegador web?
Tudo uma questo de percepo entre Performance & Accessibilidade
Sem tcnica
Graceful Degradation (1994)
Progressive Enhancement (2003)
Renderizao no navegador
HTMLCSSInline CSSInline JSDone!
Bloqueia Renderizao
Bloqueia Renderizao e Downloads
Poucas requisies HTTP
CSS Sprites
Image maps
Combinando JavaScript e CSS
Combinando JS e CSS
Separao de scripts eficiente
Doloto Microsoft Researchhttp://research.microsoft.com/en-us/projects/doloto/
JSLint / Google Closure compiler
Tcnicas de carga sob demanda
XHR eval
XHR injection
Script ou IFRAME
Script DOM element
Script defer
CSS no topo
Flash Of Unstyled Content (FOUC)
JavaScript na base (bottom)
JavaScript na base
Tolerncia falha
CNAME para download paralelo
Minificar JavaScript
Gzip componentes
Gzip componentes
HTML, CSS e JavaScript
Request
Response
Accept-Encoding: gzip, deflate
Content-Encoding: gzipVary: Accept-Encoding,User-Agent
Gzip componentes
mod_deflate
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
Chunked responses
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 estratgia
ChunkView http://tools.w3clubs.com/chunkview/chunkview.php
1
2
4
3
HTML Semntico
Acessibilidade
SEO
Tolerncia falha
JavaScript OO
Template Binding
Template Binding
HTML direto no JS
Manipulao de DOM no JS
Clonar um elemento template
Jquery Templatehttp://api.jquery.com/jQuery.template/
Template Binding
Perguntas?
${Name}
function renderList() { // Template ser compilado somente uma vez. $( "#summaryTpl" ) .tmpl( movies ) .appendTo( "#moviesList" );}
[...]
[...]
[...]
[...]
yahoo.util = function () { var __construct, setFormAjax, setLinkAjax;
__construct = function (context) { // No faz nada };
setFormAjax = function ($form) { // Implementao aqui };
setLinkAjax = function ($link) { // Implementao aqui };
return (function () { var self = { setFormAjax: setFormAjax, setLinkAjax: setLinkAjax };
__construct(self);
return self; })(); };
Follow
[...]
yahoo.util.setFormAjax($(".follow"));