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 620 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

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

×