Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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č
Prochain SlideShare
Chargement dans…5
×

Jak funguje prohlížeč

361 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

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_

×