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 mais - 1 modification dans - 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 KISS

BISOUS

Bonnes Idées Simples Ou Ultra Sensées.

HTML

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