Télécharger en tant que KEY, PPTX
Téléchargé parharicot
Un navigateur, comment ça marche ?
Le document explique le fonctionnement interne des navigateurs web, y compris des détails sur leur architecture et leur interaction avec les ressources. Il aborde des concepts techniques tels que le parsing HTML, le modèle DOM, ainsi que le rendu et le peinturlurage des pages. Enfin, il souligne l'importance des moteurs de traitement et de l'accélération matérielle dans le fonctionnement efficace des navigateurs modernes.
Un navigateur, comment ça marche ?
- 1. UN NAVIGATEUR, COMMENT ÇAMARCHE ? Anthony Ricaud, @rik24d
- 2. Anthony Paul Mounir Robert
- 3. UN NAVIGATEUR, COMMENT ÇAMARCHE ? Anthony Ricaud, @rik24d
- 4. QUI ? -Développeur web mais - 1 modification dans Firefox - 23 dans WebKit
- 5. DES NAINS SURDES É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)
- 7.
- 8.
- 9.
- 10. C’EST COMPLIQUÉ… Couche Système de cache Moteur JS accessibilité Parseur Couche Rendu des Cookies URL réseau polices Base de Bindings données DOM Décodage Téléchargement d’images Défilement Thème natif Plugins Dessin
- 11. PRESTO GECKO WEBKIT TRIDENT
- 12. PRESTO GECKO WEBKIT TRIDENT
- 13. 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
- 14. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml
- 15. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml MODE XML
- 16. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml MODE XML
- 17. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml MODE XML
- 18. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html>
- 19. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
- 20. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
- 21. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS
- 22. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html>
- 23. RÉPONSE DU SERVEUR HTTP/1.1200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html> MODE STANDARD
- 24. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
- 25. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 ILS S’EN FICHENT
- 26. <!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>
- 27. HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 28. HTML HEAD BODY ARBRE DOM TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 29. HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 30.
- 31.
- 32. SOUS-RESSOURCES - Image -Lance le téléchargement, non bloquant
- 33. SOUS-RESSOURCES - Image -Lance le téléchargement, non bloquant - Lance un décodeur
- 34. SOUS-RESSOURCES - Image -Lance le téléchargement, non bloquant - Lance un décodeur - CSS
- 35. SOUS-RESSOURCES - Image -Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant
- 36. 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
- 37. CSS BUCKETS ID CLASS TAGNA AUTRE
- 38. CSS BUCKETS ID CLASS TAGNA AUTRE
- 39. CSS BUCKETS div ID CLASS TAGNA AUTRE
- 40. CSS BUCKETS div ID CLASS TAGNA AUTRE
- 41. CSS BUCKETS .item div ID CLASS TAGNA AUTRE
- 42. CSS BUCKETS .item div ID CLASS TAGNA AUTRE
- 43. CSS BUCKETS #sidebar .item div ID CLASS TAGNA AUTRE
- 44. CSS BUCKETS #sidebar .item div ID CLASS TAGNA AUTRE
- 45. CSS BUCKETS div#sidebar #sidebar .item div ID CLASS TAGNA AUTRE
- 46. CSS BUCKETS div#sidebar #sidebar .item div ID CLASS TAGNA AUTRE
- 47. CSS BUCKETS div p div#sidebar #sidebar .item div ID CLASS TAGNA AUTRE
- 48. CSS BUCKETS div#sidebar div p #sidebar .item div ID CLASS TAGNA AUTRE
- 49. CSS BUCKETS :visited div#sidebar div p #sidebar .item div ID CLASS TAGNA AUTRE
- 50. CSS BUCKETS div#sidebar div p #sidebar .item div :visited ID CLASS TAGNA AUTRE
- 51. DOM TREE +PARSING CSS DOM HTML Tree Style CSS Rules
- 52. CSS MATCHING div BODY .item #sidebar DIV div#sidebar div p DIV id="sidebar" ul p ul > p DIV DIV DIV class="item" class="item" class="item" body > div p #sidebar p P P P
- 53. RENDER TREE HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU
- 54. 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
- 55. DOM TREE +RENDER TREE DOM HTML Tree Render Tree Style CSS Rules
- 56. UN REFLOW OULAYOUT
- 57. UN REFLOW OULAYOUT
- 58. DOM HTML Tree Render Layout Tree Style CSS Rules
- 59. RESTE LE PAINT DOM HTML Tree Render Layout Painting Tree Style CSS Rules
- 60.
- 61. PAINT ? - Historiquement,le processeur dessine tout
- 62. PAINT ? - Historiquement,le processeur dessine tout - Mais on délègue de plus en plus au processeur graphique, spécialisé
- 63. 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
- 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
- 65. 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
- 66. JAVASCRIPT - Ne pasconfondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow
- 67. DOM HTML Tree Render Layout Tree Style CSS Rules
- 68. REFLOW POTENTIEL DOM HTML Tree Render Layout Painting Tree Style CSS Rules
- 69. JAVASCRIPT - Ne pasconfondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow
- 70. JAVASCRIPT - Ne pasconfondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow - Petit mot sur les nouveaux moteurs
- 71. - http://ricaud.me/nav-marche - http://ricaud.me/blog-nav-marche -@rik24d - Merci Mauriz
- 72. DES QUESTIONS ? -http://ricaud.me/nav-marche - http://ricaud.me/blog-nav-marche - @rik24d - Merci Mauriz
Notes de l'éditeur
- #2 Le but est de comprendre un peu ce que sont les navigateurs.\n\nC&#x2019;est le relai principal de nos m&#xE9;tiers et pourtant on ne le connait pas vraiment\n
- #3 \n
- #4 Le but est de comprendre un peu ce que sont les navigateurs.\n\nC&#x2019;est le relai principal de nos m&#xE9;tiers et pourtant on ne le connait pas vraiment\n
- #5 Avant de commencer, je vous en parle mais je ne d&#xE9;veloppe quasiment rien dans les navigateurs\n
- #6 \n
- #7 Non, pas Google Chrome.\nInterface = Chrome, on n&#x2019;en parlera pas aujourd&#x2019;hui\n
- #8 \n
- #9 \n
- #10 Et j&#x2019;en oublie certainement.\n\n\n
- #11 Et j&#x2019;en oublie certainement.\n\n\n
- #12 Et j&#x2019;en oublie certainement.\n\n\n
- #13 Et j&#x2019;en oublie certainement.\n\n\n
- #14 Et j&#x2019;en oublie certainement.\n\n\n
- #15 Et j&#x2019;en oublie certainement.\n\n\n
- #16 Et j&#x2019;en oublie certainement.\n\n\n
- #17 Et j&#x2019;en oublie certainement.\n\n\n
- #18 Et j&#x2019;en oublie certainement.\n\n\n
- #19 Et j&#x2019;en oublie certainement.\n\n\n
- #20 Et j&#x2019;en oublie certainement.\n\n\n
- #21 Et j&#x2019;en oublie certainement.\n\n\n
- #22 Et j&#x2019;en oublie certainement.\n\n\n
- #23 Et j&#x2019;en oublie certainement.\n\n\n
- #24 Et j&#x2019;en oublie certainement.\n\n\n
- #25 On va surtout se concentrer sur Gecko et WebKit. Vu qu&#x2019;ils sont open source, il y a plus de litt&#xE9;rature.\nMais les principes s&#x2019;appliquent globalement &#xE0; tous. Et puis les standards rendent certains algos obligatoires\n
- #26 On va surtout se concentrer sur Gecko et WebKit. Vu qu&#x2019;ils sont open source, il y a plus de litt&#xE9;rature.\nMais les principes s&#x2019;appliquent globalement &#xE0; tous. Et puis les standards rendent certains algos obligatoires\n
- #27 On va aller du moment o&#xF9; on tape une adresse\njusqu'au moment de l'affichage de la page\nD'abord le cas statique\n
- #28 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #29 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #30 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #31 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #32 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #33 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #34 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #35 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #36 Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
- #37 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #38 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #39 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #40 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #41 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #42 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #43 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #44 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #45 Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
- #46 Mode standard\n
- #47 On n&#x2019;a pas parl&#xE9; de versions.\nCe qui compte c&#x2019;est &#xAB;est-ce que je comprends ou pas&#xBB;\nTous les navigateurs ont &#xE7;a sauf depuis IE8 qui a introduit plein de modes diff&#xE9;rents\n
- #48 \n
- #49 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #50 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #51 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #52 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #53 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #54 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #55 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #56 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #57 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #58 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #59 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #60 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #61 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #62 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #63 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #64 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #65 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #66 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #67 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #68 Et voici le DOM. Document Object Model.\nC&#x2019;est cet arbre que l&#x2019;on manipule via JS, ce qui est affich&#xE9; dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC&#x2019;est l&#x2019;un des gros points forts de HTML5, c&#x2019;est d&#x2019;avoir expliqu&#xE9; tr&#xE8;s pr&#xE9;cis&#xE9;ment comment cette &#xE9;tape se d&#xE9;roule\n
- #69 En fait il y a aussi des noeuds texte vides mais bon.\n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #78 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #79 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #80 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #81 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #82 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #83 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #84 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #85 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #86 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #87 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #88 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #89 On ne regarde que la partie droite.\nCe sont des hashtables, donc tr&#xE8;s facile de trouver tous les s&#xE9;lecteurs qui match un &#xE9;l&#xE9;ment\n&#xC9;tape de pr&#xE9;paration\n
- #90 \n
- #91 On parcourt le DOM et pour chaque n&#x153;ud, on va chercher les s&#xE9;lecteurs qui correspondent\n
- #92 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #93 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #94 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #95 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #96 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #97 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #98 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #99 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #100 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #101 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #102 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #103 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #104 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #105 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #106 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #107 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #108 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #109 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #110 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #111 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #112 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #113 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #114 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #115 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #116 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #117 On a les r&#xE8;gles, on a le DOM tree, assemblons les.\nC'est li&#xE9; &#xE0; la propri&#xE9;t&#xE9; display\n
- #118 \n
- #119 On prend les r&#xE8;gles et on pose &#xE7;a sur la page\nCalcule les dimensions et les positions des &#xE9;l&#xE9;ments\n
- #120 \n
- #121 \n
- #122 \n
- #123 Exemple avec position: fixed\n
- #124 Exemple avec position: fixed\n
- #125 Exemple avec position: fixed\n
- #126 \n
- #127 Analogie avec PHP et MySQL\nAu lieu d'&#xEA;tre sur des autoroutes, on doit traverser de petits ponts\n\n\n
- #128 \n
- #129 \n
- #130 \n
- #131 Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
- #132 Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
- #133 Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
- #134 Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
- #135 Ceci &#xE9;tait une introduction, j'esp&#xE8;re que &#xE7;a vous a int&#xE9;ress&#xE9;.\n