Your SlideShare is downloading. ×
  • Like
Alta performance de Aplicações Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Alta performance de Aplicações Web

  • 1,374 views
Published

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.

Published 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,374
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
30
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