Alta performance de Aplicações Web

Alta Performance de
Aplicações Web
Michael 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


Roteiro

Importância
Front-end
Back-end


Antes, alguns conceitos...



Performance



Performance

Disponibilidade



Performance

Disponibilidade

Escalabilidade


Importância


Importância

Criado em Outubro/2010
Mar/12: 30 milhões de usuários
Mai/12: 50 milhões de usuários
upload de 58 fotos/segundo


Importância

fonte: http://blog.kissmetrics.com/loading-time/?wide=1

Front-end


Front-End
“80% do tempo de resposta ao usuário é gasto no
front-end.” -Yahoo

Download e interpretação em tempo de execução
HTML
CSS
JavaScript
Anúncios, em alguns casos


Front-End
“80% do tempo de resposta ao usuário é gasto no
front-end.” -Yahoo

Download e interpretação em tempo de execução
HTML
CSS É o lado mais fácil
JavaScript de ser tratado.

Anúncios, em alguns casos


Reduzir quantidade de
requisições HTTP
Requisições e respostas têm cabeçalho e corpo

Layouts mais Menos arquivos a serem
limpos recuperados
Combinar Um só arquivo JS
arquivos Um só arquivo CSS

CSS Sprites

Image Maps

“A proximidade do usuário ao servidor Web tem
impacto no tempo de resposta” -Yahoo


Usar uma Rede de Entrega
de Conteúdo (CDN)
“A proximidade do usuário ao servidor Web tem
impacto no tempo de resposta” -Yahoo

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)


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


Cache (navegador)

O que é? E se eu precisar alterar
um arquivo?
Imagens, CSS, JavaScript


Cache (navegador)

O que é? E se eu precisar alterar
um arquivo?
Imagens, CSS, JavaScript principal.120.css



Cache Vazio

Cache Cheio


Gzipar A partir do HTTP 1.1

Accept-Encoding: gzip, deflate

Cliente Servidor
Content-Encoding: gzip

Redução no tempo de resposta: ± 70%
Problemas com navegadores mais antigos
90% dos navegadores usados suportam Gzip

Eﬁcaz para arquivos de texto (HTML, JS, CSS, XML, JSON)


Minify JavaScript e CSS
(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

JSMin, YUI Compressor
Ruby On Rails: nativo
Grails: por meio de plugins (UI Performance, Resources)
Java (JSP/JSF): http://code.google.com/p/granule/

Estilos no topo, JS no ﬁm
CSS <head>
Páginas parecem carregar mais
rápido CSS
Páginas renderizam
progressivamente <body>
JavaScript
Scripts bloqueiam mais de dois
downloads paralelos
$(document).ready(function(){
JQuery: // Your code here JavaScript
});

Outras Práticas
JS e CSS externos
Se os JavaScript’s e CSS’s ﬁcarem no HTML, eles
não ﬁcarão no cache
Otimizar imagens
Evitar Redirects
Remover scripts duplicados (2 dos top-10 sites dos
EUA)
Não escalar imagens em HTML


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/


Back-end


Back-end
O cuidado com a capacidade de expansão da infraestrutura
deve ser proporcional à quantidade de acessos

Se a infraestrutura não suportar, todo o site pode ﬁcar
indisponível
Identiﬁcação de gargalos
Projeto do banco de dados
Distribuição do processamento e armazenamento


Nem sempre...

Um só servidor de aplicação e um só servidor de BD
Muitas vezes é suﬁciente
É difícil gerenciar ambientes de alto desempenho
Controle do que está em produção


Cache (servidor)

Cliente Servidor Web BD


Cache (servidor)


Proxy HTTP reverso com cache


Cache (servidor)


Proxy HTTP reverso com cache

Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxy
Entrega aumentada em 300 - 1000x (Varnish)
Útil: leituras mais frequentes que escritas

Cache (servidor)


Proxy HTTP reverso com cache Cache de dados


Cache (servidor)
Ex1.: Memcached: genérico e distribuído, usado por
YouTube, Twitter, Wikipedia, Flickr
Ex2.: Ehcache: Java, usada mais em sistemas empresariais


Proxy HTTP reverso com cache Cache de dados


Load Balancers


BD’s NoSQL
Sem 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

Apache Cassandra
MongoDB
Redis db4o
Apache CouchDB
BerkleyDB

Servidores Web orientados
a eventos
Também chamados “servidores
assíncronos”
Alternativa aos servidores Web
“orientados a processos”


Cloud
SaaS
Ótima opção Aplicações (email, CRM,
comunicação, etc)
Simplicidade
Plataforma estável e aprovada PaaS
Servidores Web, BD,
desenvolvimento
Contra:
Falta de serviços no Brasil IaaS
(dependência da relação US$ x R$) Armazenamento, VM’s,
balanceamento de carga


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.


Importância - de novo


Alta performance de Aplicações Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

Ähnlich wie Alta performance de Aplicações Web

Ähnlich wie Alta performance de Aplicações Web (20)

Alta performance de Aplicações Web