Jak funguje prohlížeč
42
JAK FUNGUJE PROHLÍŽEČ Michal Matuška
-
Upload
superkoderi -
Category
Internet
-
view
311 -
download
3
Transcript of Jak funguje prohlížeč
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 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í
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ědomí, že něco není v pořádku
1s máte na načtení celé stránky
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í 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
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
owserswork/
https://www.html5rocks.com/en/tutorials/speed/css-
paint-times/
https://aerotwist.com/blog/
http://jankfree.org/
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
@fireball_
