Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimalizace webových aplikací

699 views

Published on

Prezentace pro seminář Web Inkognito

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Optimalizace webových aplikací

  1. 1. Op#malizace  webových  aplikacíOndřej  Mirtes@OndrejMirtes  Vašek  Purchart@VasekPurchart  
  2. 2. Spojování  souborů•  reset.css  •  layout.css  •  typography.css  •  naviga;on.css  •  bu=ons.css  •  forms.css  •  tables.css  •  editor.css  all.css  
  3. 3. Minifikace#navigation  ul  {      font-­‐size:  24px;      line-­‐height:  40px;  }  #navigation  ul  li  {      padding:  0;  }  #navigation  ul  li  a  {      border:  0;      color:  #333;  }  #navigation  ul  li  a  .count  {      font-­‐size:  14px;      color:  #c41700;  }  #navigation  ul{font-­‐size:  24px;line-­‐height:  40px;}#navigation  ul  li{padding:0;#navigation  ul  li  a{border:  0;color:  #333;}#navigation  ul  li  a  .count{font-­‐size:14px;color:  #c41700;}  #navigation  ul  li  a:hover  {color:#c41700;#navigation  ul  li  ul{padding:  0;font-­‐size:  18px;}#navigation  ul  li.active  >  a  {color:#c41700;#navigation  ul  li:before{display:  none;}select.submenu  {display:  none;}  
  4. 4. CSS  &  JavaScript  připojujte  externě<html>  <head>          <style>                  #navigation  ul  {                          font-­‐size:  24px;                          line-­‐height:  40px;                  }                  #navigation  ul  li  {                          padding:  0;                  }                  ...          </style>  </head>  ...  
  5. 5. CSS  &  JavaScript  připojujte  externě<head>    <link  rel="stylesheet"          type="text/css"                      href="all.css">  </head>  
  6. 6. CSS  &  JavaScript  připojujte  externě<html>  <body>          <script>                $(#container)                        .click(function(e)  {                              //  ...                });          </script>  </body>  ...  
  7. 7. CSS  &  JavaScript  připojujte  externě<script  src="all.js"></script>  
  8. 8. Kam  připojit  JavaScript?•  Náročná  blokující  operace  •  Těsně  před  </body>•  Prohlížeč  dá  při  načítání  přednost  viditelným  prvkům  jako  jsou  obrázky  
  9. 9. CSS  sprites
  10. 10. CSS  sprites.question-­‐mark-­‐icon  {            width:  15px;          height:  19px;          background-­‐image:        url(sprites.png);          background-­‐position:        -­‐103px  -­‐172px;    }  
  11. 11. Obrázky  s  data  URI•  Zakódování  obrázku  do  řetězce  •  V  Internet  Exploreru  s  problémy    background-­‐image:  url(data:image/png;base64,iVBORw0KGgoAAAA...);  
  12. 12. Opakující  se  pozadí
  13. 13. Opakující  se  pozadí
  14. 14. JPEG
  15. 15. PNG•  Bezeztrátová  komprese  •  Vhodný  pro  ikony  a  webdesign  •  U  fotografií  příliš  narůstá  velikost  
  16. 16. Vektorová  grafika•  CSS3  –  kulaté  rohy,  barevné  přechody,  sZny  •  SVG  –  obrázky  zapsané  v  XML  •  Sady  ikon  jako  speciální  fonty  – Font  Awesome  
  17. 17. Vektorová  grafika
  18. 18. Doporučení  k  obrázkům•  V  HTML  by  měly  mít  uvedené  rozměry  •  Zabrání  se  nechtěným  skokům  při  načítání  <img  src="image.jpg"  width="150"  height="100">  
  19. 19. Doporučení  k  obrázkům•  Barva  pozadí  by  měla  odpovídat  grafice,  která  se  přes  něj  načte  
  20. 20. Content  Delivery  Network  (CDN)•  Určitě  využijete  pro  načtení  frameworků  •  Pozor  na  práci  off-­‐line  •  Pro  vlastní  sta;cké  soubory  – Amazon  S3,  CloudFront  – Velcí  hráči  si  budují  vlastní  CDN  •  Max.  2-­‐6  souběžných  požadavků  na  doménu  – Řeší  se  rozložením  na  více  subdomén  
  21. 21. Obsluha  sta#ckých  souborů  přes  PHP•  Jen  při  potřebě  zabezpečení  souborů  pro  přihlášené  uživatele  •  Spouštění  aplikace  je  náročné  a  prodlužuje  odezvu  •  Server  za  nás  implementuje  např.  navazování  stahování    ☠  
  22. 22. Průběh  načtení  stránky
  23. 23. F12  tools•  Firefox  –  Firebug  (addon)  
  24. 24. F12  tools•  Chrome  
  25. 25. Komunikace  se  serverem
  26. 26. Last-­‐Modified,  If-­‐Modified-­‐Since•  První  dotaz  Response:  Last-­‐Modified:  Fri,  3  May  2013  12:00:00  GMT  
  27. 27. Last-­‐Modified,  If-­‐Modified-­‐Since•  První  dotaz  Response:  Last-­‐Modified:  Fri,  3  May  2013  12:00:00  GMT    •  další  dotazy  Request:  If-­‐Modified-­‐Since:  Fri,  3  May  2013  12:00:00  GMT    •  304  Not  Modified  
  28. 28. ETag,  If-­‐None-­‐Match•  První  dotaz  Response:  ETag:  "686897696a7c876b7e  "  
  29. 29. ETag,  If-­‐None-­‐Match•  První  dotaz  Response:  ETag:  "686897696a7c876b7e  "    •  další  dotazy  Request:  If-­‐None-­‐Match:  "686897696a7c876b7e  "    •  304  Not  Modified  
  30. 30. Expires•  První  dotaz:  Response:    Expires:  Mon,  3  Jun  2013  12:00:00  GMT  
  31. 31. Expires•  První  dotaz:  Response:    Expires:  Mon,  3  Jun  2013  12:00:00  GMT    •  další  dotazy  Nic,  pokud  neexpirovalo  
  32. 32. Cache-­‐Control:  max-­‐age•  První  dotaz:  Response:    Cache-­‐Control:  max-­‐age=2678400  
  33. 33. Vyhnue  se  cachování•  Cache-­‐Control:  no-­‐cache  •  staré  Expires  
  34. 34. gzip  komprese•  Pro  HTML,  CSS,  JavaScript  •  V  .htaccess:    <IfModule  mod_deflate.c>    AddOutputFilterByType  DEFLATE  text/html  text/plain  text/xml  text/css  application/x-­‐javascript  text/javascript  application/javascript  application/json  </IfModule>  
  35. 35. Chrome  Audit
  36. 36. Ukládání  dat  u  uživatele
  37. 37. Applica#on  Cache
  38. 38. Web(local)  storage
  39. 39. Web  SQL
  40. 40. IndexedDB
  41. 41. Dynamické  načítání  obsahu
  42. 42. Vizuální  zrychlení
  43. 43. Server•  Návrh  aplikace  •  Volba  frameworků  •  Nastavení  a  volba  serveru  •  Op;malizace  aplikačního  kódu  •  Opcode  cache  •  Cachování  dat  
  44. 44. Databáze•  Databázové  indexy  •  Pozor  na  počet  dotazů  •  Stahovat  jen  potřebná  data  

×