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 Rendu des URL Cookies réseau polices Base de Bindings données DOM Décodage d images Plugins Défilement Dessin Téléchargement Thème natif
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 <html>
RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html>
RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html> MODE STANDARD
HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 ILS S EN FICHENT
<!doctype html> <html> <head> <title>kiss</title> </head> <body> <div> <h1>bisous</h1> <p>bonnes Idées Simples Ou Ultra Sensées.</p> </div> </body> </html>
HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU ULTRA SENSÉES.
HTML HEAD BODY TITLE ARBRE DOM DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU ULTRA SENSÉES.
HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES 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 HTML DOM Tree CSS Style Rules
DIV class="item" CSS MATCHING BODY DIV DIV id="sidebar" DIV class="item" DIV class="item" div.item #sidebar div#sidebar div p ul p ul > p body > div p #sidebar p P P P
RENDER TREE HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU
RENDER TREE HTML Viewport Scroll HEAD BODY Block TITLE DIV Block Block KISS H1 P Block Text Block Text BISOUS BONNES IDÉES SIMPLES OU
DOM TREE + RENDER TREE HTML DOM Tree Render Tree CSS Style Rules
UN REFLOW OU LAYOUT
UN REFLOW OU LAYOUT
HTML DOM Tree Render Tree Layout CSS Style Rules
RESTE LE PAINT HTML DOM Tree Render Tree Layout Painting CSS Style 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
HTML DOM Tree Render Tree Layout CSS Style Rules
REFLOW POTENTIEL HTML DOM Tree Render Tree Layout Painting CSS Style 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