0
Alta Performance de          Aplicações Web          Michael Schuenck dos Santos          @michaelsssegunda-feira, 14 de m...
Quem sou eu?            MSc. em Sistemas e            Computação            Analista de Sistemas no TRE-TO            Ex-p...
Roteiro               Importância               Front-end               Back-endsegunda-feira, 14 de maio de 12
Antes, alguns conceitos...segunda-feira, 14 de maio de 12
Antes, alguns conceitos...                                  Performancesegunda-feira, 14 de maio de 12
Antes, alguns conceitos...                                   Performance                                  Disponibilidades...
Antes, alguns conceitos...                                   Performance                                  Disponibilidade ...
Importânciasegunda-feira, 14 de maio de 12
Importânciasegunda-feira, 14 de maio de 12
Importânciasegunda-feira, 14 de maio de 12
Importânciasegunda-feira, 14 de maio de 12
Importância                                  Criado em Outubro/2010                                  Mar/12: 30 milhões de...
Importância                                  fonte: http://blog.kissmetrics.com/loading-time/?wide=1segunda-feira, 14 de m...
Front-endsegunda-feira, 14 de maio de 12
Front-End                   “80% do tempo de resposta ao usuário é gasto no                                front-end.” -Ya...
Front-End                   “80% do tempo de resposta ao usuário é gasto no                                front-end.” -Ya...
Reduzir quantidade de          requisições HTTP                      Requisições e respostas têm cabeçalho e corpo        ...
“A proximidade do usuário ao servidor Web tem                           impacto no tempo de resposta” -Yahoosegunda-feira,...
Usar uma Rede de Entrega          de Conteúdo (CDN)                       “A proximidade do usuário ao servidor Web tem   ...
Cache (navegador)               O que é?               Adicionar cabeçalho Expires ou Cache-Control                      S...
Cache (navegador)               O que é?                    E se eu precisar alterar                                      ...
Cache (navegador)               O que é?                    E se eu precisar alterar                                      ...
Cache Vazio                                  Cache Cheiosegunda-feira, 14 de maio de 12
Gzipar                                       A partir do HTTP 1.1                                  Accept-Encoding: gzip, ...
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck...
Minify JavaScript e CSS  (function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow...
Estilos no topo, JS no fim                                    CSS                  <head>             Páginas parecem carre...
Outras Práticas               JS e CSS externos                      Se os JavaScript’s e CSS’s ficarem no HTML, eles      ...
Front-end: ferramentas               YSlow: http://yslow.org/               Google PageSpeed: https://developers.google.co...
Back-endsegunda-feira, 14 de maio de 12
Back-end      O cuidado com a capacidade de expansão da infraestrutura            deve ser proporcional à quantidade de ac...
Nem sempre...               Um só servidor de aplicação e um só servidor de BD                      Muitas vezes é suficien...
Cache (servidor)        Cliente                   Servidor Web   BDsegunda-feira, 14 de maio de 12
Cache (servidor)        Cliente                          Servidor Web   BD                    Proxy HTTP reverso com cache...
Cache (servidor)        Cliente                          Servidor Web       BD                    Proxy HTTP reverso com c...
Cache (servidor)        Cliente                          Servidor Web                BD                    Proxy HTTP reve...
Cache (servidor)                                  Ex1.: Memcached: genérico e distribuído, usado por                      ...
Load Balancerssegunda-feira, 14 de maio de 12
BD’s NoSQL               Sem SQL: interação mais “leve” e direta               BD servem apenas para armazenamento e recup...
Servidores Web orientados          a eventos             Também chamados “servidores             assíncronos”             ...
Servidores Web orientados          a eventos             Também chamados “servidores             assíncronos”             ...
Cloud                                                                 SaaS               Ótima opção                      ...
Referências            Front-end:                  Steve Souders. High Performance Web Sites. O’Reilly, 2007.             ...
Importância - de novosegunda-feira, 14 de maio de 12
Importância - de novosegunda-feira, 14 de maio de 12
Importância - de novosegunda-feira, 14 de maio de 12
Importância - de novosegunda-feira, 14 de maio de 12
Alta Performance de          Aplicações Web          Michael Schuenck dos Santos          @michaelsssegunda-feira, 14 de m...
Upcoming SlideShare
Loading in...5
×

Alta performance de Aplicações Web

1,513

Published 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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,513
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Alta performance de Aplicações Web"

  1. 1. Alta Performance de Aplicações Web Michael Schuenck dos Santos @michaelsssegunda-feira, 14 de maio de 12
  2. 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. 3. Roteiro Importância Front-end Back-endsegunda-feira, 14 de maio de 12
  4. 4. Antes, alguns conceitos...segunda-feira, 14 de maio de 12
  5. 5. Antes, alguns conceitos... Performancesegunda-feira, 14 de maio de 12
  6. 6. Antes, alguns conceitos... Performance Disponibilidadesegunda-feira, 14 de maio de 12
  7. 7. Antes, alguns conceitos... Performance Disponibilidade Escalabilidadesegunda-feira, 14 de maio de 12
  8. 8. Importânciasegunda-feira, 14 de maio de 12
  9. 9. Importânciasegunda-feira, 14 de maio de 12
  10. 10. Importânciasegunda-feira, 14 de maio de 12
  11. 11. Importânciasegunda-feira, 14 de maio de 12
  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. 13. Importância fonte: http://blog.kissmetrics.com/loading-time/?wide=1segunda-feira, 14 de maio de 12
  14. 14. Front-endsegunda-feira, 14 de maio de 12
  15. 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. 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. 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. 18. “A proximidade do usuário ao servidor Web tem impacto no tempo de resposta” -Yahoosegunda-feira, 14 de maio de 12
  19. 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. 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. 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. 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. 23. Cache Vazio Cache Cheiosegunda-feira, 14 de maio de 12
  24. 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. 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. 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. 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. 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. 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. 30. Back-endsegunda-feira, 14 de maio de 12
  31. 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. 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. 33. Cache (servidor) Cliente Servidor Web BDsegunda-feira, 14 de maio de 12
  34. 34. Cache (servidor) Cliente Servidor Web BD Proxy HTTP reverso com cachesegunda-feira, 14 de maio de 12
  35. 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. 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. 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. 38. Load Balancerssegunda-feira, 14 de maio de 12
  39. 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. 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. 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. 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. 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. 44. Importância - de novosegunda-feira, 14 de maio de 12
  45. 45. Importância - de novosegunda-feira, 14 de maio de 12
  46. 46. Importância - de novosegunda-feira, 14 de maio de 12
  47. 47. Importância - de novosegunda-feira, 14 de maio de 12
  48. 48. Alta Performance de Aplicações Web Michael Schuenck dos Santos @michaelsssegunda-feira, 14 de maio de 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×