Un navigateur, comment ça marche ?

•Télécharger en tant que KEY, PDF•

7 j'aime•2,613 vues

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…

Technologie

UN NAVIGATEUR,
COMMENT ÇA MARCHE ?

Anthony Ricaud, @rik24d

QUI ?

- Développeur web mais
- 1 modiﬁcation 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)

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éﬁlement Thème natif
Plugins
Dessin

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
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>
<!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.

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

DOM
HTML
Tree

Render
Layout
Tree

Style
CSS
Rules

RESTE LE PAINT
DOM
HTML
Tree

Render
Layout Painting
Tree

Style
CSS
Rules

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

JAVASCRIPT

- Ne pas confondre JS et DOM
- DOM = lent
- Attention aux déclenchements de reﬂow

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 reﬂow
- 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 CopyBlescot

RP Réseaux Sociauxmaevacdcm

Guia Trueque Elkarteak.info

Fortalecimiento de la relación de la gestión institucional y el presupuesto p...Fundación CiGob

Ayoub's Cours of ExcelAyoub Ben Ali

Clase para el día sabado y domingo 27Fernando Luis Márquez Caro

Pire que-les-feux-de-l-amourRichard Conord

Deux applications webolipey

programme pédagogique chanvre banchélibnam

Marketing cinf 6400 2012University of Puerto Rico, Río Piedras Campus

Allen.Antoine Certificates.PDFAntoine Allen

El Proceso De Boloniatecnosedavi

Jardinswlk999

Panorama de la Société 2014OECD Directorate for Employment, Labour and Social Affairs

Taller de Consumer Insights - Febrero 2009Consumer Truth - Insights & Planning

Brigitte BardotRo Acosta

Bilan de la Saison / ADT VAr / Françoise DumontSaint-Tropez Tourisme

Présentation1Dur Mark

The emerald-frlibnam

Programme visite d'études septembre 2014 chanvre et paille - bretagnelibnam

En vedette (20)

Présentation de l'outil de stockage en ligne Copy

RP Réseaux Sociaux

Guia Trueque

Fortalecimiento de la relación de la gestión institucional y el presupuesto p...

Ayoub's Cours of Excel

Clase para el día sabado y domingo 27

Pire que-les-feux-de-l-amour

Deux applications web

programme pédagogique chanvre banché

Marketing cinf 6400 2012

Allen.Antoine Certificates.PDF

El Proceso De Bolonia

Jardins

Panorama de la Société 2014

Taller de Consumer Insights - Febrero 2009

Brigitte Bardot

Bilan de la Saison / ADT VAr / Françoise Dumont

Présentation1

The emerald-fr

Programme visite d'études septembre 2014 chanvre et paille - bretagne

Similaire à Un navigateur, comment ça marche ?

html-css-casuhal.pdfRihabBENLAMINE

Intégrateurs, bousculez vos habitudesRaphaël Goetter

technologie web - part2Benoît Simard

HTML5 et le SEO : quelles opportunités ?Eroan Boyer

Seo les bases module 2Nicolas BYKOFF

Inclure du Javascript de manière performanteJean-Pierre Vincent

Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger

BDW-ProgWEB_P1.pdfRihabBENLAMINE

WordPress et SEO - SEOCampus 2013Daniel Roch - SeoMix

CSS 3Thomas Bodin

Master Idemm - Le référencement des contenus spécifiquesSébastien Billard

Formation - P3 - SPIP SquelettesPatrick Vincent

developpement web HTML & CSS web SémantiqueYounesOuladSayad1

Formation rédaction Web SAAQMichael Carpentier

Cours Html.pdf4gnzggpfdw

Creation de-themes-wpChi Nacim

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez

Un site web responsive en une heureRaphaël Goetter

SSL 2011 : Présentation de 2 bases noSQLHervé Leclerc

cours Cascading style sheet developpement webYounesOuladSayad1

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

html-css-casuhal.pdf

Intégrateurs, bousculez vos habitudes

technologie web - part2

HTML5 et le SEO : quelles opportunités ?

Seo les bases module 2

Inclure du Javascript de manière performante

Comment évaluer la qualité d'un site web selon les techniques d'intégration w...

BDW-ProgWEB_P1.pdf

WordPress et SEO - SEOCampus 2013

CSS 3

Master Idemm - Le référencement des contenus spécifiques

Formation - P3 - SPIP Squelettes

developpement web HTML & CSS web Sémantique

Formation rédaction Web SAAQ

Cours Html.pdf

Creation de-themes-wp

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2

Un site web responsive en une heure

SSL 2011 : Présentation de 2 bases noSQL

cours Cascading style sheet developpement web

Un navigateur, comment ça marche ?

1. UN NAVIGATEUR, COMMENT ÇA MARCHE ? Anthony Ricaud, @rik24d

2. Anthony Paul Mounir Robert

3. UN NAVIGATEUR, COMMENT ÇA MARCHE ? Anthony Ricaud, @rik24d

4. QUI ? - Développeur web mais - 1 modiﬁcation dans Firefox - 23 dans WebKit

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)

7. CHROME

8. CONTENT

9. C’EST COMPLIQUÉ…

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éﬁlement 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.1 200 OK Content-Type: application/xhtml+xml

15. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml MODE XML

16. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml MODE XML

17. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml MODE XML

18. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html>

19. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

20. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

21. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

22. RÉPONSE DU SERVEUR HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html>

23. RÉPONSE DU SERVEUR HTTP/1.1 200 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. SOUS-RESSOURCES

31. SOUS-RESSOURCES - Image

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 OU LAYOUT

57. UN REFLOW OU LAYOUT

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. PAINT ?

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 pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reﬂow

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 pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reﬂow

70. JAVASCRIPT - Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reﬂow - 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

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
\n
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
Avant de commencer, je vous en parle mais je ne d&#xE9;veloppe quasiment rien dans les navigateurs\n
\n
Non, pas Google Chrome.\nInterface = Chrome, on n&#x2019;en parlera pas aujourd&#x2019;hui\n
\n
\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
Et j&#x2019;en oublie certainement.\n\n\n
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
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
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
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Hop, on passe au parseur XML\n\nGestion d&#x2019;erreurs drastiques, &#xE7;a peut provoquer &#xE7;a.\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Quirks\nIl y a d&#x2019;autres variations dans ce mode\n
Mode standard\n
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
\n
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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&#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
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
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
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
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
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
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
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
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
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
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
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
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
\n
On parcourt le DOM et pour chaque n&#x153;ud, on va chercher les s&#xE9;lecteurs qui correspondent\n
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
\n
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
\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'&#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&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
Compilation = se rappeler le code pour ne pas refaire la m&#xEA;me chose\nOptimisation pour le code souvent appel&#xE9; \n
Ceci &#xE9;tait une introduction, j'esp&#xE8;re que &#xE7;a vous a int&#xE9;ress&#xE9;.\n

Un navigateur, comment ça marche ?

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Un navigateur, comment ça marche ?

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

Un navigateur, comment ça marche ?

Notes de l'éditeur