UN NAVIGATEUR, COMMENT ÇA MARCHE ?
Anthony Ricaud, @rik24d Anthony Paul Mounir Robert UN NAVIGATEUR, COMMENT ÇA MARCHE ?
Anthony Ricaud, @rik24d QUI ?
- Développeur web chez Mozilla mais - 1 modification dans Firefox - 23 dans WebKit DES NAINS SUR DES ÉPAULES DE GÉANTS
- Robert O’Callahan, Boris Zbarsky, David Baron (Mozilla) - Dave Hyatt, Simon Fraser (Apple) - Paul Irish, Alex Russell, Tony Gentilcore, (Google) - Anne Van Kersteren (Opera) - Nicholas Zakas, Eric Law (Microsoft)
CHROME CONTENT C’EST COMPLIQUÉ… C’EST COMPLIQUÉ… Système de Couche cache Moteur JS accessibilité Parseur Couche Cookies Rendu des URL réseau polices Base de Bindings données DOM Décodage Téléchargement d’images Défilement Thème natif Plugins Dessin PRESTO GECKO WEBKIT TRIDENT PRESTO GECKO WEBKIT TRIDENT DÉBUT DE REQUÊTE
- On lit l’URL : protocole, domaine - Requête DNS www.mozilla.org -> 63.245.208.161 - Ouverture TCP, Requête HTTP RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
MODE XML RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
MODE XML RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
MODE XML RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
MODE QUIRKS RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
MODE QUIRKS RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
MODE QUIRKS RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
RÉPONSE DU SERVEUR
HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
MODE STANDARD HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
ILS S’EN FICHENT
BISOUS
Bonnes Idées Simples Ou Ultra Sensées.
HEAD BODY
TITLE DIV
KISS H1 P
BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES. HTML
HEAD BODY
TITLE ARBRE DOMDIV
KISS H1 P
BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES. HTML
HEAD BODY
TITLE DIV
KISS H1 P
BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES. SOUS-RESSOURCES SOUS-RESSOURCES
- Image SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c’est intéressant CSS BUCKETS
ID CLASS TAGNAME AUTRES CSS BUCKETS
ID CLASS TAGNAME AUTRES CSS BUCKETS div
ID CLASS TAGNAME AUTRES CSS BUCKETS
div
ID CLASS TAGNAME AUTRES CSS BUCKETS .item
div
ID CLASS TAGNAME AUTRES CSS BUCKETS
.item div
ID CLASS TAGNAME AUTRES CSS BUCKETS #sidebar
.item div
ID CLASS TAGNAME AUTRES CSS BUCKETS
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS div#sidebar
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS
div#sidebar
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS div p
div#sidebar
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS
div#sidebar div p
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS :visited
div#sidebar div p
#sidebar .item div
ID CLASS TAGNAME AUTRES CSS BUCKETS
div#sidebar div p
#sidebar .item div :visited
ID CLASS TAGNAME AUTRES DOM TREE + PARSING CSS
DOM HTML Tree
Style CSS Rules CSS MATCHING div BODY .item #sidebar
DIV div#sidebar div p DIV ul p id="sidebar" ul > p DIV DIV DIV body > div p class="item" class="item" class="item" #sidebar p
P P P RENDER TREE
HTML
HEAD BODY
TITLE DIV
KISS H1 P
BONNES IDÉES BISOUS SIMPLES OU RENDER TREE Viewport HTML Scroll
HEAD BODY Block
Block TITLE DIV Block
Block Block KISS H1 P Text Text
BONNES IDÉES BISOUS SIMPLES OU DOM TREE + RENDER TREE
DOM HTML Tree
Render Tree
Style CSS Rules UN REFLOW OU LAYOUT UN REFLOW OU LAYOUT DOM HTML Tree
Render Layout Tree
Style CSS Rules RESTE LE PAINT
DOM HTML Tree
Render Layout Painting Tree
Style CSS Rules PAINT ? PAINT ?
- Historiquement, le processeur dessine tout PAINT ?
- Historiquement, le processeur dessine tout - Mais on délègue de plus en plus au processeur graphique, spécialisé PAINT ?
- Historiquement, le processeur dessine tout - Mais on délègue de plus en plus au processeur graphique, spécialisé - La fameuse accélération matérielle SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c’est intéressant SOUS-RESSOURCES
- Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c’est intéressant - JS - Lance le téléchargement, presque bloquant JAVASCRIPT
- Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow DOM HTML Tree
Render Layout Tree
Style CSS Rules REFLOW POTENTIEL
DOM HTML Tree
Render Layout Painting Tree
Style CSS Rules JAVASCRIPT
- Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow JAVASCRIPT
- Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow - Petit mot sur les nouveaux moteurs - http://ricaud.me/nav-marche - http://ricaud.me/blog-nav-marche - @rik24d - Merci Mauriz DES QUESTIONS ?
- http://ricaud.me/nav-marche - http://ricaud.me/blog-nav-marche - @rik24d - Merci Mauriz