• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Un navigateur, comment ça marche ?
 

Un navigateur, comment ça marche ?

on

  • 5,437 views

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

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…

Statistics

Views

Total Views
5,437
Views on SlideShare
2,489
Embed Views
2,948

Actions

Likes
7
Downloads
38
Comments
1

15 Embeds 2,948

http://www.paris-web.fr 1679
http://hanblog.info 911
http://speakerrate.com 107
http://www.hanblog.info 75
http://lanyrd.com 65
http://parisweb2011 38
http://ricaud.me 27
http://planet.inertie.org 19
http://a0.twimg.com 11
http://paper.li 6
http://parisweb2011.rberton.caradisiac.dev 3
http://www.newsblur.com 3
http://zootool.com 2
http://www.bonblog.com 1
https://www.google.fr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Un navigateur, comment ça marche ? Un navigateur, comment ça marche ? Presentation Transcript

  • 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 policesBase de Bindingsdonné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 SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xml MODE XML
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> MODE QUIRKS
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>
  • RÉPONSE DU SERVEURHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-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 UltraSensées.</p> </div> </body>
  • HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • HTMLHEAD BODY ARBRE DOMTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • HTMLHEAD BODYTITLE DIVKISS 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 BUCKETSdiv#sidebar#sidebar .item div ID CLASS TAGNA AUTRE
  • CSS BUCKETS div pdiv#sidebar#sidebar .item div ID CLASS TAGNA AUTRE
  • CSS BUCKETSdiv#sidebar div p#sidebar .item div ID CLASS TAGNA AUTRE
  • CSS BUCKETS :visiteddiv#sidebar div p#sidebar .item div ID CLASS TAGNA AUTRE
  • CSS BUCKETSdiv#sidebar div p#sidebar .item div :visited ID CLASS TAGNA AUTRE
  • DOM TREE + PARSING CSS DOMHTML Tree StyleCSS Rules
  • CSS MATCHING div BODY .item #sidebar DIV div#sidebar div p DIV id="sidebar" ul p ul > p DIV DIV DIVclass="item" class="item" class="item" body > div p #sidebar p P P P
  • RENDER TREE HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU
  • RENDER TREE Viewport HTML ScrollHEAD BODY Block BlockTITLE DIV Block Block BlockKISS H1 P Text Text BONNES IDÉES BISOUS SIMPLES OU
  • DOM TREE + RENDER TREE DOMHTML Tree Render Tree StyleCSS Rules
  • UN REFLOW OU LAYOUT
  • UN REFLOW OU LAYOUT
  • DOMHTML Tree Render Layout Tree StyleCSS Rules
  • RESTE LE PAINT DOMHTML Tree Render Layout Painting Tree StyleCSS 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
  • DOMHTML Tree Render Layout Tree StyleCSS Rules
  • REFLOW POTENTIEL DOMHTML Tree Render Layout Painting Tree StyleCSS 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