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.
JAK FUNGUJE PROHLÍŽEČ
Michal Matuška
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Co nás dnes čeká
Poznání, které zvýší výkon vašich webů.
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Motivace
 rozšíření odborných teoretických znalostí
 přestat používat ...
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Cíl
Svatý grál web vývojářů - 60fps
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Špatný výkon odrazuje
 77% uživatelů si odezvy všímá
 po 100ms si uvěd...
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Základní vrstva prohlížeče
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
MAIN FLOW
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
RENDER TREE
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
LAYOUT (REFLOW)
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Layout boundries
 Element je SVG root dokument nebo input
nebo
 Nesmí ...
Jak funguje prohlížeč Michal Matuška, SuperKodéři
PAINTING
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
COMPOSITE
Jak funguje prohlížeč Michal Matuška, SuperKodéři
3 TIPY, NA CO SI DÁT POZOR
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Ukázka
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Užitečné nástroje
 Chrome DevTools
 Safari DevTools
 ...
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Kam dál
 https://www.html5rocks.com/en/tutorials/internals/howbr
owsers...
Jak funguje prohlížeč Michal Matuška, SuperKodéři
HAPPY CODING
Jak funguje prohlížeč Michal Matuška, SuperKodéři
Děkuji za pozornost
Michal Matuška, SuperKodér
michal.matuska@superkoder...
Jak funguje prohlížeč
Jak funguje prohlížeč
Jak funguje prohlížeč
Jak funguje prohlížeč
Jak funguje prohlížeč
Upcoming SlideShare
Loading in …5
×

Jak funguje prohlížeč

335 views

Published on

Poznání, které zvýší výkon vašich webů

Published in: Internet
  • Be the first to comment

Jak funguje prohlížeč

  1. 1. JAK FUNGUJE PROHLÍŽEČ Michal Matuška
  2. 2. Jak funguje prohlížeč Michal Matuška, SuperKodéři Co nás dnes čeká Poznání, které zvýší výkon vašich webů.
  3. 3. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  4. 4. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  5. 5. Jak funguje prohlížeč Michal Matuška, SuperKodéři Motivace  rozšíření odborných teoretických znalostí  přestat používat prohlížeč jako black box  objevit kritická místa při zpracování kódu a jak si jim můžu vyhnout  Teorií vylepšit psaný kód. Mít více argumentů k tomu rozhodnout se správně  Výkon nejde optimalizovat bez těchto znalostí
  6. 6. Jak funguje prohlížeč Michal Matuška, SuperKodéři Cíl Svatý grál web vývojářů - 60fps
  7. 7. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  8. 8. Jak funguje prohlížeč Michal Matuška, SuperKodéři Špatný výkon odrazuje  77% uživatelů si odezvy všímá  po 100ms si uvědomí, že něco není v pořádku  1s máte na načtení celé stránky
  9. 9. Jak funguje prohlížeč Michal Matuška, SuperKodéři Základní vrstva prohlížeče
  10. 10. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  11. 11. Jak funguje prohlížeč Michal Matuška, SuperKodéři MAIN FLOW
  12. 12. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  13. 13. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  14. 14. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  15. 15. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  16. 16. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  17. 17. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  18. 18. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  19. 19. Jak funguje prohlížeč Michal Matuška, SuperKodéři RENDER TREE
  20. 20. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  21. 21. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  22. 22. Jak funguje prohlížeč Michal Matuška, SuperKodéři LAYOUT (REFLOW)
  23. 23. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  24. 24. Jak funguje prohlížeč Michal Matuška, SuperKodéři Layout boundries  Element je SVG root dokument nebo input nebo  Nesmí být display inline nebo inline-block  Nesmí mít výšku auto nebo procentuální.  Nesmí mít šířku auto.  Musí mít overflow (scroll, auto, hidden).  Nesmí být potomek tabulky
  25. 25. Jak funguje prohlížeč Michal Matuška, SuperKodéři PAINTING
  26. 26. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  27. 27. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  28. 28. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  29. 29. Jak funguje prohlížeč Michal Matuška, SuperKodéři COMPOSITE
  30. 30. Jak funguje prohlížeč Michal Matuška, SuperKodéři 3 TIPY, NA CO SI DÁT POZOR
  31. 31. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  32. 32. Jak funguje prohlížeč Michal Matuška, SuperKodéři Ukázka
  33. 33. Jak funguje prohlížeč Michal Matuška, SuperKodéři
  34. 34. Jak funguje prohlížeč Michal Matuška, SuperKodéři Užitečné nástroje  Chrome DevTools  Safari DevTools  ...
  35. 35. Jak funguje prohlížeč Michal Matuška, SuperKodéři Kam dál  https://www.html5rocks.com/en/tutorials/internals/howbr owserswork/  https://www.html5rocks.com/en/tutorials/speed/css- paint-times/  https://aerotwist.com/blog/  http://jankfree.org/
  36. 36. Jak funguje prohlížeč Michal Matuška, SuperKodéři HAPPY CODING
  37. 37. Jak funguje prohlížeč Michal Matuška, SuperKodéři Děkuji za pozornost Michal Matuška, SuperKodér michal.matuska@superkoderi.cz @fireball_

×