Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Un navigateur, comment ça marche ?

6,669 views

Published on

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…

Published in: Technology

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

×