UN NAVIGATEUR,COMMENT ÇA MARCHE ?         Anthony Ricaud, @rik24d
Anthony   Paul   Mounir   Robert
UN NAVIGATEUR,COMMENT ÇA MARCHE ?         Anthony Ricaud, @rik24d
QUI ? - Développeur web 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 Fra...
CHROME
CONTENT
C’EST COMPLIQUÉ…
C’EST COMPLIQUÉ… Couche                Système de                                            cache   Moteur JS            ...
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êt...
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml              MODE XML
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml              MODE XML
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml              MODE XML
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>             MODE QUIRKS
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>             MODE QUIRKS
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>             MODE QUIRKS
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>
RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>    ...
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 Ult...
HTMLHEAD              BODYTITLE             DIVKISS       H1                   P                           BONNES IDÉES   ...
HTMLHEAD                BODY        ARBRE DOMTITLE               DIVKISS         H1                   P                   ...
HTMLHEAD                BODYTITLE               DIVKISS           H1             P                             BONNES IDÉE...
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 blo...
SOUS-RESSOURCES- Image - Lance le téléchargement, non bloquant - Lance un décodeur- CSS - Lance le téléchargement, non blo...
CSS BUCKETS ID     CLASS   TAGNA   AUTRE
CSS BUCKETS ID     CLASS   TAGNA   AUTRE
CSS BUCKETS             div ID     CLASS   TAGNA         AUTRE
CSS BUCKETS                 div ID     CLASS   TAGNA   AUTRE
CSS BUCKETS             .item                 div ID     CLASS   TAGNA       AUTRE
CSS BUCKETS        .item    div ID     CLASS   TAGNA   AUTRE
CSS BUCKETS             #sidebar        .item    div ID     CLASS   TAGNA        AUTRE
CSS BUCKETS#sidebar   .item    div  ID       CLASS   TAGNA   AUTRE
CSS BUCKETS              div#sidebar#sidebar   .item    div  ID       CLASS   TAGNA         AUTRE
CSS BUCKETSdiv#sidebar#sidebar      .item    div    ID        CLASS   TAGNA   AUTRE
CSS BUCKETS                  div pdiv#sidebar#sidebar      .item    div    ID        CLASS   TAGNA       AUTRE
CSS BUCKETSdiv#sidebar           div p#sidebar      .item    div    ID        CLASS   TAGNA   AUTRE
CSS BUCKETS                  :visiteddiv#sidebar           div p#sidebar      .item    div    ID        CLASS   TAGNA     ...
CSS BUCKETSdiv#sidebar           div p#sidebar      .item    div    :visited    ID        CLASS   TAGNA   AUTRE
DOM TREE + PARSING CSS       DOMHTML       Tree       StyleCSS       Rules
CSS MATCHING                               div                BODY                             .item                      ...
RENDER TREE         HTMLHEAD             BODYTITLE               DIVKISS        H1                 P                      ...
RENDER TREE                                                 Viewport         HTML                                         ...
DOM TREE + RENDER TREE       DOMHTML       Tree               Render                Tree       StyleCSS       Rules
UN REFLOW OU LAYOUT
UN REFLOW OU LAYOUT
DOMHTML       Tree               Render                        Layout                Tree       StyleCSS       Rules
RESTE LE PAINT       DOMHTML       Tree               Render                        Layout   Painting                Tree ...
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é-...
SOUS-RESSOURCES- Image  - Lance le téléchargement, non bloquant  - Lance un décodeur- CSS  - Lance le téléchargement, non ...
SOUS-RESSOURCES- Image  - Lance le téléchargement, non bloquant  - Lance un décodeur- CSS  - Lance le téléchargement, non ...
JAVASCRIPT- Ne pas confondre JS et DOM- DOM = lent- Attention aux déclenchements de reflow
DOMHTML       Tree               Render                        Layout                Tree       StyleCSS       Rules
REFLOW POTENTIEL       DOMHTML       Tree               Render                        Layout   Painting                Tre...
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 mote...
- 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
Un navigateur, comment ça marche ?
Prochain SlideShare
Chargement dans…5
×

Un navigateur, comment ça marche ?

6 344 vues

Publié le

On lui donne des milliers de lignes de code, on lui envoie plein de médias, on lui demande de faire le grand écart entre Wikipédia et une version web d'un OS. Et pourtant, on ne le connaît pas vraiment alors qu'il est au centre de nos métiers.

Dans cette session, nous verrons un peu ce qui passe au cours de la vie d'une page web et comment les instructions que l'on donne à un navigateur sont transformées. On parlera sans doute de trafic réseau, de construction de la page à partir du HTML, d'interprétation des CSS et de rendu à l'écran, de modification de la page via JavaScript. Et peut-être verra-t-on Michel Chevalet…

Publié dans : Technologie
1 commentaire
7 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
6 344
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 189
Actions
Partages
0
Téléchargements
48
Commentaires
1
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Le but est de comprendre un peu ce que sont les navigateurs.\n\nC&amp;#x2019;est le relai principal de nos m&amp;#xE9;tiers et pourtant on ne le connait pas vraiment\n
  • \n
  • Le but est de comprendre un peu ce que sont les navigateurs.\n\nC&amp;#x2019;est le relai principal de nos m&amp;#xE9;tiers et pourtant on ne le connait pas vraiment\n
  • Avant de commencer, je vous en parle mais je ne d&amp;#xE9;veloppe quasiment rien dans les navigateurs\n
  • \n
  • Non, pas Google Chrome.\nInterface = Chrome, on n&amp;#x2019;en parlera pas aujourd&amp;#x2019;hui\n
  • \n
  • \n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • Et j&amp;#x2019;en oublie certainement.\n\n\n
  • On va surtout se concentrer sur Gecko et WebKit. Vu qu&amp;#x2019;ils sont open source, il y a plus de litt&amp;#xE9;rature.\nMais les principes s&amp;#x2019;appliquent globalement &amp;#xE0; tous. Et puis les standards rendent certains algos obligatoires\n
  • On va surtout se concentrer sur Gecko et WebKit. Vu qu&amp;#x2019;ils sont open source, il y a plus de litt&amp;#xE9;rature.\nMais les principes s&amp;#x2019;appliquent globalement &amp;#xE0; tous. Et puis les standards rendent certains algos obligatoires\n
  • On va aller du moment o&amp;#xF9; on tape une adresse\njusqu&apos;au moment de l&apos;affichage de la page\nD&apos;abord le cas statique\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  • Mode standard\n
  • On n&amp;#x2019;a pas parl&amp;#xE9; de versions.\nCe qui compte c&amp;#x2019;est &amp;#xAB;est-ce que je comprends ou pas&amp;#xBB;\nTous les navigateurs ont &amp;#xE7;a sauf depuis IE8 qui a introduit plein de modes diff&amp;#xE9;rents\n
  • \n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • Et voici le DOM. Document Object Model.\nC&amp;#x2019;est cet arbre que l&amp;#x2019;on manipule via JS, ce qui est affich&amp;#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&amp;#x2019;est l&amp;#x2019;un des gros points forts de HTML5, c&amp;#x2019;est d&amp;#x2019;avoir expliqu&amp;#xE9; tr&amp;#xE8;s pr&amp;#xE9;cis&amp;#xE9;ment comment cette &amp;#xE9;tape se d&amp;#xE9;roule\n
  • En fait il y a aussi des noeuds texte vides mais bon.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&amp;#xE8;s facile de trouver tous les s&amp;#xE9;lecteurs qui match un &amp;#xE9;l&amp;#xE9;ment\n&amp;#xC9;tape de pr&amp;#xE9;paration\n
  • \n
  • On parcourt le DOM et pour chaque n&amp;#x153;ud, on va chercher les s&amp;#xE9;lecteurs qui correspondent\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • On a les r&amp;#xE8;gles, on a le DOM tree, assemblons les.\nC&apos;est li&amp;#xE9; &amp;#xE0; la propri&amp;#xE9;t&amp;#xE9; display\n
  • \n
  • On prend les r&amp;#xE8;gles et on pose &amp;#xE7;a sur la page\nCalcule les dimensions et les positions des &amp;#xE9;l&amp;#xE9;ments\n
  • \n
  • \n
  • \n
  • Exemple avec position: fixed\n
  • Exemple avec position: fixed\n
  • Exemple avec position: fixed\n
  • \n
  • Analogie avec PHP et MySQL\nAu lieu d&apos;&amp;#xEA;tre sur des autoroutes, on doit traverser de petits ponts\n\n\n
  • \n
  • \n
  • \n
  • Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  • Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  • Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  • Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  • Ceci &amp;#xE9;tait une introduction, j&apos;esp&amp;#xE8;re que &amp;#xE7;a vous a int&amp;#xE9;ress&amp;#xE9;.\n
  • Un navigateur, comment ça marche ?

    1. 1. UN NAVIGATEUR,COMMENT ÇA MARCHE ? Anthony Ricaud, @rik24d
    2. 2. Anthony Paul Mounir Robert
    3. 3. UN NAVIGATEUR,COMMENT ÇA MARCHE ? Anthony Ricaud, @rik24d
    4. 4. QUI ? - Développeur web mais - 1 modification dans Firefox - 23 dans WebKit
    5. 5. 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)
    6. 6. CHROME
    7. 7. CONTENT
    8. 8. C’EST COMPLIQUÉ…
    9. 9. C’EST COMPLIQUÉ… Couche Système de cache Moteur JS accessibilité Parseur Couche Rendu des Cookies URL réseau policesBase de Bindingsdonnées DOM Décodage Téléchargement d’images Défilement Thème natif Plugins Dessin
    10. 10. PRESTO GECKO WEBKIT TRIDENT
    11. 11. PRESTO GECKO WEBKIT TRIDENT
    12. 12. 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
    13. 13. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml
    14. 14. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
    15. 15. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
    16. 16. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
    17. 17. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>
    18. 18. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
    19. 19. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
    20. 20. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
    21. 21. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>
    22. 22. RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html> MODE STANDARD
    23. 23. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
    24. 24. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 ILS S’EN FICHENT
    25. 25. <!doctype html><html> <head> <title>KISS</title> </head> <body> <div> <h1>BISOUS</h1> <p>Bonnes Idées Simples Ou UltraSensées.</p> </div> </body>
    26. 26. HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    27. 27. HTMLHEAD BODY ARBRE DOMTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    28. 28. HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    29. 29. SOUS-RESSOURCES
    30. 30. SOUS-RESSOURCES- Image
    31. 31. SOUS-RESSOURCES- Image - Lance le téléchargement, non bloquant
    32. 32. SOUS-RESSOURCES- Image - Lance le téléchargement, non bloquant - Lance un décodeur
    33. 33. SOUS-RESSOURCES- Image - Lance le téléchargement, non bloquant - Lance un décodeur- CSS
    34. 34. SOUS-RESSOURCES- Image - Lance le téléchargement, non bloquant - Lance un décodeur- CSS - Lance le téléchargement, non bloquant
    35. 35. 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
    36. 36. CSS BUCKETS ID CLASS TAGNA AUTRE
    37. 37. CSS BUCKETS ID CLASS TAGNA AUTRE
    38. 38. CSS BUCKETS div ID CLASS TAGNA AUTRE
    39. 39. CSS BUCKETS div ID CLASS TAGNA AUTRE
    40. 40. CSS BUCKETS .item div ID CLASS TAGNA AUTRE
    41. 41. CSS BUCKETS .item div ID CLASS TAGNA AUTRE
    42. 42. CSS BUCKETS #sidebar .item div ID CLASS TAGNA AUTRE
    43. 43. CSS BUCKETS#sidebar .item div ID CLASS TAGNA AUTRE
    44. 44. CSS BUCKETS div#sidebar#sidebar .item div ID CLASS TAGNA AUTRE
    45. 45. CSS BUCKETSdiv#sidebar#sidebar .item div ID CLASS TAGNA AUTRE
    46. 46. CSS BUCKETS div pdiv#sidebar#sidebar .item div ID CLASS TAGNA AUTRE
    47. 47. CSS BUCKETSdiv#sidebar div p#sidebar .item div ID CLASS TAGNA AUTRE
    48. 48. CSS BUCKETS :visiteddiv#sidebar div p#sidebar .item div ID CLASS TAGNA AUTRE
    49. 49. CSS BUCKETSdiv#sidebar div p#sidebar .item div :visited ID CLASS TAGNA AUTRE
    50. 50. DOM TREE + PARSING CSS DOMHTML Tree StyleCSS Rules
    51. 51. CSS MATCHING div BODY .item #sidebar DIV div#sidebar div p DIV id="sidebar" ul p ul > p DIV DIV DIVclass="item" class="item" class="item" body > div p #sidebar p P P P
    52. 52. RENDER TREE HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU
    53. 53. RENDER TREE Viewport HTML ScrollHEAD BODY Block BlockTITLE DIV Block Block BlockKISS H1 P Text Text BONNES IDÉES BISOUS SIMPLES OU
    54. 54. DOM TREE + RENDER TREE DOMHTML Tree Render Tree StyleCSS Rules
    55. 55. UN REFLOW OU LAYOUT
    56. 56. UN REFLOW OU LAYOUT
    57. 57. DOMHTML Tree Render Layout Tree StyleCSS Rules
    58. 58. RESTE LE PAINT DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
    59. 59. PAINT ?
    60. 60. PAINT ?- Historiquement, le processeur dessine tout
    61. 61. PAINT ?- Historiquement, le processeur dessine tout- Mais on délègue de plus en plus au processeur graphique, spécialisé
    62. 62. 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
    63. 63. 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
    64. 64. 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
    65. 65. JAVASCRIPT- Ne pas confondre JS et DOM- DOM = lent- Attention aux déclenchements de reflow
    66. 66. DOMHTML Tree Render Layout Tree StyleCSS Rules
    67. 67. REFLOW POTENTIEL DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
    68. 68. JAVASCRIPT- Ne pas confondre JS et DOM- DOM = lent- Attention aux déclenchements de reflow
    69. 69. JAVASCRIPT- Ne pas confondre JS et DOM- DOM = lent- Attention aux déclenchements de reflow- Petit mot sur les nouveaux moteurs
    70. 70. - http://ricaud.me/nav-marche- http://ricaud.me/blog-nav-marche- @rik24d- Merci Mauriz
    71. 71. DES QUESTIONS ?- http://ricaud.me/nav-marche- http://ricaud.me/blog-nav-marche- @rik24d- Merci Mauriz

    ×