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…
4. QUI ?
- Développeur web mais
- 1 modification 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)
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
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
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
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 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 pas confondre JS et DOM
- DOM = lent
- Attention aux déclenchements de reflow
70. JAVASCRIPT
- Ne pas confondre JS et DOM
- DOM = lent
- Attention aux déclenchements de reflow
- Petit mot sur les nouveaux moteurs
Le but est de comprendre un peu ce que sont les navigateurs.\n\nC’est le relai principal de nos mé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’est le relai principal de nos métiers et pourtant on ne le connait pas vraiment\n
Avant de commencer, je vous en parle mais je ne développe quasiment rien dans les navigateurs\n
\n
Non, pas Google Chrome.\nInterface = Chrome, on n’en parlera pas aujourd’hui\n
\n
\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
Et j’en oublie certainement.\n\n\n
On va surtout se concentrer sur Gecko et WebKit. Vu qu’ils sont open source, il y a plus de littérature.\nMais les principes s’appliquent globalement à tous. Et puis les standards rendent certains algos obligatoires\n
On va surtout se concentrer sur Gecko et WebKit. Vu qu’ils sont open source, il y a plus de littérature.\nMais les principes s’appliquent globalement à tous. Et puis les standards rendent certains algos obligatoires\n
On va aller du moment où 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’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Hop, on passe au parseur XML\n\nGestion d’erreurs drastiques, ça peut provoquer ça.\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Quirks\nIl y a d’autres variations dans ce mode\n
Mode standard\n
On n’a pas parlé de versions.\nCe qui compte c’est «est-ce que je comprends ou pas»\nTous les navigateurs ont ça sauf depuis IE8 qui a introduit plein de modes différents\n
\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se déroule\n
Et voici le DOM. Document Object Model.\nC’est cet arbre que l’on manipule via JS, ce qui est affiché dans Firebug, Chrome Devtools, Dragonfly, etc\n\nC’est l’un des gros points forts de HTML5, c’est d’avoir expliqué très précisément comment cette étape se dé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ès facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
On ne regarde que la partie droite.\nCe sont des hashtables, donc très facile de trouver tous les sélecteurs qui match un élément\nÉtape de préparation\n
\n
On parcourt le DOM et pour chaque nœud, on va chercher les sélecteurs qui correspondent\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
On a les règles, on a le DOM tree, assemblons les.\nC'est lié à la propriété display\n
\n
On prend les règles et on pose ça sur la page\nCalcule les dimensions et les positions des élé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'ê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ême chose\nOptimisation pour le code souvent appelé \n
Compilation = se rappeler le code pour ne pas refaire la même chose\nOptimisation pour le code souvent appelé \n
Compilation = se rappeler le code pour ne pas refaire la même chose\nOptimisation pour le code souvent appelé \n
Compilation = se rappeler le code pour ne pas refaire la même chose\nOptimisation pour le code souvent appelé \n
Ceci était une introduction, j'espère que ça vous a intéressé.\n