Upload
michael-schuenck-dos-santos
View
1.729
Download
3
Embed Size (px)
DESCRIPTION
Palestra na I Semana Acadêmica de Ciência da Computação e Gerenciamento de Redes do Instituto de Ensino e Pesquisa Objetivo do IEPO.
Citation preview
Alta Performance de Aplicações WebMichael Schuenck dos Santos@michaelss
segunda-feira, 14 de maio de 12
Quem sou eu?MSc. em Sistemas e Computação
Analista de Sistemas no TRE-TO
Ex-professor
Mantenedor do clapside.com
@michaelss
zeropontoum.tumblr.com
segunda-feira, 14 de maio de 12
Antes, alguns conceitos...
Performance
Disponibilidade
Escalabilidade
segunda-feira, 14 de maio de 12
Importância
Criado em Outubro/2010Mar/12: 30 milhões de usuáriosMai/12: 50 milhões de usuáriosupload de 58 fotos/segundo
segunda-feira, 14 de maio de 12
Importância
fonte: http://blog.kissmetrics.com/loading-time/?wide=1segunda-feira, 14 de maio de 12
Front-End
Download e interpretação em tempo de execução
HTML
CSS
JavaScript
Anúncios, em alguns casos
“80% do tempo de resposta ao usuário é gasto no front-end.” -Yahoo
segunda-feira, 14 de maio de 12
Front-End
Download e interpretação em tempo de execução
HTML
CSS
JavaScript
Anúncios, em alguns casos
“80% do tempo de resposta ao usuário é gasto no front-end.” -Yahoo
É o lado mais fácil de ser tratado.
segunda-feira, 14 de maio de 12
Reduzir quantidade de requisições HTTP
Layouts mais limpos
Menos arquivos a serem recuperados
Combinar arquivos
Um só arquivo JSUm só arquivo CSS
CSS Sprites
Image Maps
Requisições e respostas têm cabeçalho e corpo
segunda-feira, 14 de maio de 12
“A proximidade do usuário ao servidor Web tem impacto no tempo de resposta” -Yahoo
segunda-feira, 14 de maio de 12
Usar uma Rede de Entrega de Conteúdo (CDN)
Distribuir a aplicação em servidores espalhados pelo mundo?
Não, apenas o conteúdo estático
CDN própria ou de terceiros ($$$)Akamai, EdgeCast, level3
Google: algumas bibliotecas (JQuery, ExtJS, WebFonts)
“A proximidade do usuário ao servidor Web tem impacto no tempo de resposta” -Yahoo
segunda-feira, 14 de maio de 12
Cache (navegador)
O que é?
Adicionar cabeçalho Expires ou Cache-Control
Servidor Web: Apache, IIS, nginx
Imagens, CSS, JavaScript
Útil só depois que o usuário já visitou sua página
segunda-feira, 14 de maio de 12
Cache (navegador)
O que é?
Adicionar cabeçalho Expires ou Cache-Control
Servidor Web: Apache, IIS, nginx
Imagens, CSS, JavaScript
Útil só depois que o usuário já visitou sua página
E se eu precisar alterar um arquivo?
segunda-feira, 14 de maio de 12
Cache (navegador)
O que é?
Adicionar cabeçalho Expires ou Cache-Control
Servidor Web: Apache, IIS, nginx
Imagens, CSS, JavaScript
Útil só depois que o usuário já visitou sua página
E se eu precisar alterar um arquivo?
principal.120.css
segunda-feira, 14 de maio de 12
Gzipar
Redução no tempo de resposta: ± 70%
Problemas com navegadores mais antigos90% dos navegadores usados suportam Gzip
Eficaz para arquivos de texto (HTML, JS, CSS, XML, JSON)
A partir do HTTP 1.1
ServidorClienteAccept-Encoding: gzip, deflate
Content-Encoding: gzip
segunda-feira, 14 de maio de 12
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(...
segunda-feira, 14 de maio de 12
Minify JavaScript e CSS
JSMin, YUI Compressor
Ruby On Rails: nativo
Grails: por meio de plugins (UI Performance, Resources)
Java (JSP/JSF): http://code.google.com/p/granule/
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(...
Remoção de espaços, quebras de linhas, tabs
segunda-feira, 14 de maio de 12
Estilos no topo, JS no fim
JavaScript
<head>
<body>
CSS
CSSPáginas parecem carregar mais
rápidoPáginas renderizam progressivamente
JavaScriptScripts bloqueiam mais de dois
downloads paralelos$(document).ready(function(){ // Your code here });
JQuery:
segunda-feira, 14 de maio de 12
Outras PráticasJS e CSS externos
Se os JavaScript’s e CSS’s ficarem no HTML, eles não ficarão no cache
Otimizar imagens
Evitar Redirects
Remover scripts duplicados (2 dos top-10 sites dos EUA)
Não escalar imagens em HTML
segunda-feira, 14 de maio de 12
Front-end: ferramentas
YSlow: http://yslow.org/
Google PageSpeed: https://developers.google.com/speed/pagespeed/insights
Smush.it: http://developer.yahoo.com/yslow/smushit/
JSLint: http://jslint.com/
segunda-feira, 14 de maio de 12
Back-end
Se a infraestrutura não suportar, todo o site pode ficar indisponível
Identificação de gargalos
Projeto do banco de dados
Distribuição do processamento e armazenamento
O cuidado com a capacidade de expansão da infraestrutura deve ser proporcional à quantidade de acessos
segunda-feira, 14 de maio de 12
Nem sempre...
Um só servidor de aplicação e um só servidor de BD
Muitas vezes é suficiente
É difícil gerenciar ambientes de alto desempenho
Controle do que está em produção
segunda-feira, 14 de maio de 12
Cache (servidor)
Cliente Servidor Web BD
Proxy HTTP reverso com cache
segunda-feira, 14 de maio de 12
Cache (servidor)
Cliente Servidor Web BD
Proxy HTTP reverso com cache
Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxyEntrega aumentada em 300 - 1000x (Varnish)Útil: leituras mais frequentes que escritas
segunda-feira, 14 de maio de 12
Cache (servidor)
Cliente Servidor Web BD
Proxy HTTP reverso com cache Cache de dados
Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxyEntrega aumentada em 300 - 1000x (Varnish)Útil: leituras mais frequentes que escritas
segunda-feira, 14 de maio de 12
Cache (servidor)
Cliente Servidor Web BD
Proxy HTTP reverso com cache Cache de dados
Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxyEntrega aumentada em 300 - 1000x (Varnish)Útil: leituras mais frequentes que escritas
Ex1.: Memcached: genérico e distribuído, usado por YouTube, Twitter, Wikipedia, FlickrEx2.: Ehcache: Java, usada mais em sistemas empresariais
segunda-feira, 14 de maio de 12
BD’s NoSQLSem SQL: interação mais “leve” e direta
BD servem apenas para armazenamento e recuperação:
Sem lógica no BD
Duplicação p/ performance
Arquitetura distribuída, eventualmente consistentes
Documentos Chave-Valor Objeto
MongoDBApache CouchDB
Apache CassandraRedis
BerkleyDBdb4o
segunda-feira, 14 de maio de 12
Servidores Web orientados a eventosTambém chamados “servidores assíncronos”
Alternativa aos servidores Web “orientados a processos”
segunda-feira, 14 de maio de 12
Servidores Web orientados a eventosTambém chamados “servidores assíncronos”
Alternativa aos servidores Web “orientados a processos”
segunda-feira, 14 de maio de 12
Cloud
Ótima opção
Simplicidade
Plataforma estável e aprovada
Contra:
Falta de serviços no Brasil (dependência da relação US$ x R$)
SaaSAplicações (email, CRM,
comunicação, etc)
PaaSServidores Web, BD,
desenvolvimento
IaaSArmazenamento, VM’s,
balanceamento de carga
segunda-feira, 14 de maio de 12
Referências
Front-end:
Steve Souders. High Performance Web Sites. O’Reilly, 2007.
Steve Souders. Even Faster Web Sites. O’Reilly, 2009.
http://developer.yahoo.com/performance/rules.html
Back-end:
Martin L. Abbot & Michael T. Fischer. Scalability Rules: 50 Principles for Scaling Web Sites. Addison-Wesley Professional, 2011.
Martin L. Abbot & Michael T. Fischer. The Art of Scalability: Scalable Web Architecture, Processes, and Organizations for the Modern Enterprise. Addison-Wesley Professional, 2009.
segunda-feira, 14 de maio de 12