Alta performance de Aplicações Web

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


Roteiro

Importância

Front-end

Back-end


Antes, alguns conceitos...



Performance



Performance

Disponibilidade



Performance

Disponibilidade

Escalabilidade


Importância


Importância

Criado em Outubro/2010Mar/12: 30 milhões de usuáriosMai/12: 50 milhões de usuáriosupload de 58 fotos/segundo


Importância

fonte: http://blog.kissmetrics.com/loading-time/?wide=1segunda-feira, 14 de maio de 12

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

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

Front-end


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


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.


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


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


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


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?


Cache (navegador)

O que é?





E se eu precisar alterar um arquivo?

principal.120.css


Cache Vazio

Cache Cheio


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


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


http://code.google.com/p/granule/

http://code.google.com/p/granule/

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:


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


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/


http://yslow.org/

http://yslow.org/

https://developers.google.com/speed/pagespeed/insights




http://developer.yahoo.com/yslow/smushit/

http://developer.yahoo.com/yslow/smushit/

http://jslint.com/

http://jslint.com/

Back-end


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


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


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_proxyEntrega aumentada em 300 - 1000x (Varnish)Útil: leituras mais frequentes que escritas


Cache (servidor)


Proxy HTTP reverso com cache Cache de dados



Cache (servidor)


Proxy HTTP reverso com cache Cache de dados


Ex1.: Memcached: genérico e distribuído, usado por YouTube, Twitter, Wikipedia, FlickrEx2.: Ehcache: Java, usada mais em sistemas empresariais


Load Balancers


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


Servidores Web orientados a eventosTambém chamados “servidores assíncronos”

Alternativa aos servidores Web “orientados a processos”


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


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 WebMichael Schuenck dos Santos@michaelss


Alta performance de Aplicações Web

Technology

Transcript of Alta performance de Aplicações Web