SlideShare une entreprise Scribd logo
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 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É… 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
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



HEAD              BODY




TITLE             DIV




KISS       H1                   P


                           BONNES IDÉES
         BISOUS          SIMPLES OU ULTRA
                              SENSÉES.
HTML



HEAD                BODY




        ARBRE DOM
TITLE               DIV




KISS         H1                   P


                             BONNES IDÉES
           BISOUS          SIMPLES OU ULTRA
                                SENSÉES.
HTML



HEAD                BODY




TITLE               DIV




KISS           H1             P


                             BONNES IDÉES
         BISOUS            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   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 BUCKETS



div#sidebar

#sidebar      .item    div

    ID        CLASS   TAGNA   AUTRE
CSS BUCKETS                  div p




div#sidebar

#sidebar      .item    div

    ID        CLASS   TAGNA       AUTRE
CSS BUCKETS



div#sidebar           div p

#sidebar      .item    div

    ID        CLASS   TAGNA   AUTRE
CSS BUCKETS                  :visited




div#sidebar           div p

#sidebar      .item    div

    ID        CLASS   TAGNA        AUTRE
CSS BUCKETS



div#sidebar           div p

#sidebar      .item    div    :visited

    ID        CLASS   TAGNA   AUTRE
DOM TREE + PARSING CSS
       DOM
HTML
       Tree




       Style
CSS
       Rules
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
RENDER TREE
         HTML


HEAD             BODY



TITLE               DIV



KISS        H1                 P



                          BONNES IDÉES
           BISOUS          SIMPLES OU
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
DOM TREE + RENDER TREE
       DOM
HTML
       Tree



               Render
                Tree



       Style
CSS
       Rules
UN REFLOW OU LAYOUT
UN REFLOW OU LAYOUT
DOM
HTML
       Tree



               Render
                        Layout
                Tree



       Style
CSS
       Rules
RESTE LE PAINT
       DOM
HTML
       Tree



               Render
                        Layout   Painting
                Tree



       Style
CSS
       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
DOM
HTML
       Tree



               Render
                        Layout
                Tree



       Style
CSS
       Rules
REFLOW POTENTIEL
       DOM
HTML
       Tree



               Render
                        Layout   Painting
                Tree



       Style
CSS
       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

Contenu connexe

En vedette

Présentation de l'outil de stockage en ligne Copy
Présentation de l'outil de stockage en ligne CopyPrésentation de l'outil de stockage en ligne Copy
Présentation de l'outil de stockage en ligne Copy
Blescot
 
RP Réseaux Sociaux
RP Réseaux SociauxRP Réseaux Sociaux
RP Réseaux Sociaux
maevacdcm
 
Guia Trueque
Guia Trueque Guia Trueque
Guia Trueque
Elkarteak.info
 
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
Fundación CiGob
 
Ayoub's Cours of Excel
Ayoub's Cours of ExcelAyoub's Cours of Excel
Ayoub's Cours of ExcelAyoub Ben Ali
 
Clase para el día sabado y domingo 27
Clase para el día sabado y domingo 27Clase para el día sabado y domingo 27
Clase para el día sabado y domingo 27
Fernando Luis Márquez Caro
 
Pire que-les-feux-de-l-amour
Pire que-les-feux-de-l-amourPire que-les-feux-de-l-amour
Pire que-les-feux-de-l-amourRichard Conord
 
Deux applications web
Deux applications webDeux applications web
Deux applications webolipey
 
programme pédagogique chanvre banché
programme pédagogique chanvre banchéprogramme pédagogique chanvre banché
programme pédagogique chanvre banché
libnam
 
Marketing cinf 6400 2012
Marketing cinf 6400 2012Marketing cinf 6400 2012
Allen.Antoine Certificates.PDF
Allen.Antoine Certificates.PDFAllen.Antoine Certificates.PDF
Allen.Antoine Certificates.PDF
Antoine Allen
 
El Proceso De Bolonia
El Proceso De BoloniaEl Proceso De Bolonia
El Proceso De Bolonia
tecnosedavi
 
Jardins
JardinsJardins
Jardinswlk999
 
Panorama de la Société 2014
Panorama de la Société 2014Panorama de la Société 2014
Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009
Consumer Truth - Insights & Planning
 
Brigitte Bardot
Brigitte BardotBrigitte Bardot
Brigitte BardotRo Acosta
 
Bilan de la Saison / ADT VAr / Françoise Dumont
Bilan de la Saison / ADT VAr / Françoise DumontBilan de la Saison / ADT VAr / Françoise Dumont
Bilan de la Saison / ADT VAr / Françoise Dumont
Saint-Tropez Tourisme
 
Présentation1
Présentation1Présentation1
Présentation1Dur Mark
 
The emerald-fr
The emerald-frThe emerald-fr
The emerald-fr
libnam
 
Programme visite d'études septembre 2014 chanvre et paille - bretagne
Programme visite d'études septembre 2014   chanvre et paille - bretagneProgramme visite d'études septembre 2014   chanvre et paille - bretagne
Programme visite d'études septembre 2014 chanvre et paille - bretagne
libnam
 

En vedette (20)

Présentation de l'outil de stockage en ligne Copy
Présentation de l'outil de stockage en ligne CopyPrésentation de l'outil de stockage en ligne Copy
Présentation de l'outil de stockage en ligne Copy
 
RP Réseaux Sociaux
RP Réseaux SociauxRP Réseaux Sociaux
RP Réseaux Sociaux
 
Guia Trueque
Guia Trueque Guia Trueque
Guia Trueque
 
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
Fortalecimiento de la relación de la gestión institucional y el presupuesto p...
 
Ayoub's Cours of Excel
Ayoub's Cours of ExcelAyoub's Cours of Excel
Ayoub's Cours of Excel
 
Clase para el día sabado y domingo 27
Clase para el día sabado y domingo 27Clase para el día sabado y domingo 27
Clase para el día sabado y domingo 27
 
Pire que-les-feux-de-l-amour
Pire que-les-feux-de-l-amourPire que-les-feux-de-l-amour
Pire que-les-feux-de-l-amour
 
Deux applications web
Deux applications webDeux applications web
Deux applications web
 
programme pédagogique chanvre banché
programme pédagogique chanvre banchéprogramme pédagogique chanvre banché
programme pédagogique chanvre banché
 
Marketing cinf 6400 2012
Marketing cinf 6400 2012Marketing cinf 6400 2012
Marketing cinf 6400 2012
 
Allen.Antoine Certificates.PDF
Allen.Antoine Certificates.PDFAllen.Antoine Certificates.PDF
Allen.Antoine Certificates.PDF
 
El Proceso De Bolonia
El Proceso De BoloniaEl Proceso De Bolonia
El Proceso De Bolonia
 
Jardins
JardinsJardins
Jardins
 
Panorama de la Société 2014
Panorama de la Société 2014Panorama de la Société 2014
Panorama de la Société 2014
 
Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009
 
Brigitte Bardot
Brigitte BardotBrigitte Bardot
Brigitte Bardot
 
Bilan de la Saison / ADT VAr / Françoise Dumont
Bilan de la Saison / ADT VAr / Françoise DumontBilan de la Saison / ADT VAr / Françoise Dumont
Bilan de la Saison / ADT VAr / Françoise Dumont
 
Présentation1
Présentation1Présentation1
Présentation1
 
The emerald-fr
The emerald-frThe emerald-fr
The emerald-fr
 
Programme visite d'études septembre 2014 chanvre et paille - bretagne
Programme visite d'études septembre 2014   chanvre et paille - bretagneProgramme visite d'études septembre 2014   chanvre et paille - bretagne
Programme visite d'études septembre 2014 chanvre et paille - bretagne
 

Similaire à Un navigateur, comment ça marche ?

html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
Eroan Boyer
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2
Nicolas BYKOFF
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
Jean-Pierre Vincent
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Renoir Boulanger
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
Daniel Roch - SeoMix
 
CSS 3
CSS 3CSS 3
Master Idemm - Le référencement des contenus spécifiques
Master Idemm - Le référencement des contenus spécifiquesMaster Idemm - Le référencement des contenus spécifiques
Master Idemm - Le référencement des contenus spécifiques
Sébastien Billard
 
Formation - P3 - SPIP Squelettes
Formation - P3 - SPIP SquelettesFormation - P3 - SPIP Squelettes
Formation - P3 - SPIP Squelettes
Patrick Vincent
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
Chi Nacim
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
SSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQLSSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQL
Hervé Leclerc
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
YounesOuladSayad1
 

Similaire à Un navigateur, comment ça marche ? (20)

html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
 
CSS 3
CSS 3CSS 3
CSS 3
 
Master Idemm - Le référencement des contenus spécifiques
Master Idemm - Le référencement des contenus spécifiquesMaster Idemm - Le référencement des contenus spécifiques
Master Idemm - Le référencement des contenus spécifiques
 
Formation - P3 - SPIP Squelettes
Formation - P3 - SPIP SquelettesFormation - P3 - SPIP Squelettes
Formation - P3 - SPIP Squelettes
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Formation rédaction Web SAAQ
Formation rédaction Web SAAQFormation rédaction Web SAAQ
Formation rédaction Web SAAQ
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
SSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQLSSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQL
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
 

Un navigateur, comment ça marche ?

Notes de l'éditeur

  1. 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
  2. \n
  3. 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
  4. Avant de commencer, je vous en parle mais je ne d&amp;#xE9;veloppe quasiment rien dans les navigateurs\n
  5. \n
  6. Non, pas Google Chrome.\nInterface = Chrome, on n&amp;#x2019;en parlera pas aujourd&amp;#x2019;hui\n
  7. \n
  8. \n
  9. Et j&amp;#x2019;en oublie certainement.\n\n\n
  10. Et j&amp;#x2019;en oublie certainement.\n\n\n
  11. Et j&amp;#x2019;en oublie certainement.\n\n\n
  12. Et j&amp;#x2019;en oublie certainement.\n\n\n
  13. Et j&amp;#x2019;en oublie certainement.\n\n\n
  14. Et j&amp;#x2019;en oublie certainement.\n\n\n
  15. Et j&amp;#x2019;en oublie certainement.\n\n\n
  16. Et j&amp;#x2019;en oublie certainement.\n\n\n
  17. Et j&amp;#x2019;en oublie certainement.\n\n\n
  18. Et j&amp;#x2019;en oublie certainement.\n\n\n
  19. Et j&amp;#x2019;en oublie certainement.\n\n\n
  20. Et j&amp;#x2019;en oublie certainement.\n\n\n
  21. Et j&amp;#x2019;en oublie certainement.\n\n\n
  22. Et j&amp;#x2019;en oublie certainement.\n\n\n
  23. Et j&amp;#x2019;en oublie certainement.\n\n\n
  24. 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
  25. 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
  26. 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
  27. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  28. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  29. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  30. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  31. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  32. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  33. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  34. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  35. Hop, on passe au parseur XML\n\nGestion d&amp;#x2019;erreurs drastiques, &amp;#xE7;a peut provoquer &amp;#xE7;a.\n
  36. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  37. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  38. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  39. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  40. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  41. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  42. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  43. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  44. Quirks\nIl y a d&amp;#x2019;autres variations dans ce mode\n
  45. Mode standard\n
  46. 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
  47. \n
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. En fait il y a aussi des noeuds texte vides mais bon.\n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. 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
  77. 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
  78. 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
  79. 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
  80. 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
  81. 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
  82. 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
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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
  88. 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
  89. \n
  90. On parcourt le DOM et pour chaque n&amp;#x153;ud, on va chercher les s&amp;#xE9;lecteurs qui correspondent\n
  91. 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
  92. 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
  93. 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
  94. 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
  95. 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
  96. 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
  97. 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
  98. 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
  99. 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
  100. 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
  101. 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
  102. 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
  103. 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
  104. 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
  105. 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
  106. 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
  107. 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
  108. 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
  109. 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
  110. 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
  111. 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
  112. 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
  113. 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
  114. 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
  115. 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
  116. 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
  117. \n
  118. 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
  119. \n
  120. \n
  121. \n
  122. Exemple avec position: fixed\n
  123. Exemple avec position: fixed\n
  124. Exemple avec position: fixed\n
  125. \n
  126. Analogie avec PHP et MySQL\nAu lieu d&apos;&amp;#xEA;tre sur des autoroutes, on doit traverser de petits ponts\n\n\n
  127. \n
  128. \n
  129. \n
  130. Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  131. Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  132. Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  133. Compilation = se rappeler le code pour ne pas refaire la m&amp;#xEA;me chose\nOptimisation pour le code souvent appel&amp;#xE9; \n
  134. 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