Alta performance de Aplicações Web

  • 1,352 views
Uploaded on

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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,352
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
29
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Alta Performance de Aplicações Web Michael Schuenck dos Santos @michaelsssegunda-feira, 14 de maio de 12
  • 2. Quem sou eu? MSc. em Sistemas e Computação Analista de Sistemas no TRE-TO Ex-professor Mantenedor do clapside.com @michaelss zeropontoum.tumblr.comsegunda-feira, 14 de maio de 12
  • 3. Roteiro Importância Front-end Back-endsegunda-feira, 14 de maio de 12
  • 4. Antes, alguns conceitos...segunda-feira, 14 de maio de 12
  • 5. Antes, alguns conceitos... Performancesegunda-feira, 14 de maio de 12
  • 6. Antes, alguns conceitos... Performance Disponibilidadesegunda-feira, 14 de maio de 12
  • 7. Antes, alguns conceitos... Performance Disponibilidade Escalabilidadesegunda-feira, 14 de maio de 12
  • 8. Importânciasegunda-feira, 14 de maio de 12
  • 9. Importânciasegunda-feira, 14 de maio de 12
  • 10. Importânciasegunda-feira, 14 de maio de 12
  • 11. Importânciasegunda-feira, 14 de maio de 12
  • 12. 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/segundosegunda-feira, 14 de maio de 12
  • 13. Importância fonte: http://blog.kissmetrics.com/loading-time/?wide=1segunda-feira, 14 de maio de 12
  • 14. Front-endsegunda-feira, 14 de maio de 12
  • 15. 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 casossegunda-feira, 14 de maio de 12
  • 16. 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 casossegunda-feira, 14 de maio de 12
  • 17. 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 Mapssegunda-feira, 14 de maio de 12
  • 18. “A proximidade do usuário ao servidor Web tem impacto no tempo de resposta” -Yahoosegunda-feira, 14 de maio de 12
  • 19. 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)segunda-feira, 14 de maio de 12
  • 20. 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áginasegunda-feira, 14 de maio de 12
  • 21. Cache (navegador) O que é? E se eu precisar alterar um arquivo? 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áginasegunda-feira, 14 de maio de 12
  • 22. Cache (navegador) O que é? E se eu precisar alterar um arquivo? Adicionar cabeçalho Expires ou Cache-Control Servidor Web: Apache, IIS, nginx Imagens, CSS, JavaScript principal.120.css Útil só depois que o usuário já visitou sua páginasegunda-feira, 14 de maio de 12
  • 23. Cache Vazio Cache Cheiosegunda-feira, 14 de maio de 12
  • 24. 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 Eficaz para arquivos de texto (HTML, JS, CSS, XML, JSON)segunda-feira, 14 de maio de 12
  • 25. (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
  • 26. 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/segunda-feira, 14 de maio de 12
  • 27. Estilos no topo, JS no fim 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 });segunda-feira, 14 de maio de 12
  • 28. Outras Práticas JS 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 HTMLsegunda-feira, 14 de maio de 12
  • 29. 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
  • 30. Back-endsegunda-feira, 14 de maio de 12
  • 31. 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 ficar indisponível Identificação de gargalos Projeto do banco de dados Distribuição do processamento e armazenamentosegunda-feira, 14 de maio de 12
  • 32. 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çãosegunda-feira, 14 de maio de 12
  • 33. Cache (servidor) Cliente Servidor Web BDsegunda-feira, 14 de maio de 12
  • 34. Cache (servidor) Cliente Servidor Web BD Proxy HTTP reverso com cachesegunda-feira, 14 de maio de 12
  • 35. Cache (servidor) Cliente Servidor Web BD 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 escritassegunda-feira, 14 de maio de 12
  • 36. Cache (servidor) Cliente Servidor Web BD Proxy HTTP reverso com cache Cache de dados Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxy Entrega aumentada em 300 - 1000x (Varnish) Útil: leituras mais frequentes que escritassegunda-feira, 14 de maio de 12
  • 37. Cache (servidor) Ex1.: Memcached: genérico e distribuído, usado por YouTube, Twitter, Wikipedia, Flickr Ex2.: Ehcache: Java, usada mais em sistemas empresariais Cliente Servidor Web BD Proxy HTTP reverso com cache Cache de dados Ex.: Varnish, Nginx e Apache com mod_cache e mod_proxy Entrega aumentada em 300 - 1000x (Varnish) Útil: leituras mais frequentes que escritassegunda-feira, 14 de maio de 12
  • 38. Load Balancerssegunda-feira, 14 de maio de 12
  • 39. 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 BerkleyDBsegunda-feira, 14 de maio de 12
  • 40. Servidores Web orientados a eventos Também chamados “servidores assíncronos” Alternativa aos servidores Web “orientados a processos”segunda-feira, 14 de maio de 12
  • 41. Servidores Web orientados a eventos Também chamados “servidores assíncronos” Alternativa aos servidores Web “orientados a processos”segunda-feira, 14 de maio de 12
  • 42. 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 cargasegunda-feira, 14 de maio de 12
  • 43. 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
  • 44. Importância - de novosegunda-feira, 14 de maio de 12
  • 45. Importância - de novosegunda-feira, 14 de maio de 12
  • 46. Importância - de novosegunda-feira, 14 de maio de 12
  • 47. Importância - de novosegunda-feira, 14 de maio de 12
  • 48. Alta Performance de Aplicações Web Michael Schuenck dos Santos @michaelsssegunda-feira, 14 de maio de 12