SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
Un navigateur,
comment ça marche ?
Juin 2017
Un naviga > kesako
Un naviga > kesako > chrome
Chrome
Un naviga > kesako > content
content
Un naviga > kesako > c’est compliqué
Moteur JS
Rendu de police
Accessibilité systéme de cache
Parseur URL
Cookies
Couche réseau
Binding DOM
Base de données
Décodage d’image
Téléchargement
Défilement
Dessin
...
Un naviga > kesako > c’est compliqué
GECKO WEBKIT
BLINK WEBCORE
TRIDENT
OPEN SOURCE PROPRIO
Un naviga > kesako > Début requête
Requête & Réponse
Un naviga > kesako > Début requête
Supposons qu’on veut se connecter à http://www.neticoa.fr/
● On lit l’URL : domaine, protocole
● Requête DNS :
○ www.neticoa.fr → 176.31.212.233
● Ouverture session TCP, Requête HTTP
Un naviga > kesako > Réponse
HTTP/1.1 200 OK
Content-Type: application/xhtml-xml
MODE XML
Un naviga > kesako > Réponse
HTTP/1.1 200 OK
Content-Type: application/xhtml-xml
Content-Type: text/html
<html>
MODE QUIRKS
Un naviga > kesako > Réponse
HTTP/1.1 200 OK
Content-Type: application/xhtml-xml
Content-Type: text/html
<HTML>
<!DOCTYPE HTML>
<HTML>
MODE STANDARD
Un naviga > kesako > Réponse
HTML5, HTML4, XHTML1.0,
CSS3, ECMASCRIPT 5
IL N’ESSAIE PAS DE COMPRENDRE
Un naviga > kesako > DOM
DOM
Un naviga > kesako > DOM
<!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>
Un naviga > kesako > DOM
ARBRE DOM
Un naviga > kesako > ressources
● Image
○ Lance le téléchargement, non bloquant
○ Lance un décodeur
● CSS
○ Lance le téléchargement, non bloquant
○ Et cela commence à devenir intéressant
Un naviga > kesako > css buckets
ID CLASS TAGNAME AUTRES
div
div
.item
#sidebar
div#sidebar
div p
:visited
:visited
div p.item#sidebar
div#sidebar
div .item
div .item
#sidebar p
#sidebar p
Un naviga > kesako > CSS MATCHING
Un naviga > kesako > Render tree
Un naviga > kesako > COMBINAISON
HTML
CSS
DOM
TREE
Style
Rules
RENDER
TREE
REFLOW
Un naviga > kesako > reflow - layout
Reflow est le processus du navigateur Web pour recalculer les positions et
les géométries des éléments dans le document afin de retransmettre une
partie ou la totalité du document.
Un naviga > kesako > reflow - layout
Un naviga > kesako > COMBINAISON
HTML
CSS
DOM
TREE
Style
Rules
RENDER
TREE
REFLOW PAINTING
Un naviga > kesako > painting
Painting(re-painting) se produit lorsque des modifications sont apportées
à un élément qui modifie la visibilité, mais n'affecte pas sa mise en page.
Exemple: http://www.neticoa.sn/#group
Un naviga > kesako > ressources
● Image
○ Lance le téléchargement, non bloquant
○ Lance un décodeur
● CSS
○ Lance le téléchargement, non bloquant
● Javascript
○ Lance le téléchargement, presque bloquant
Un naviga > Javascript > Comment ?
● Le javascript est un langage de programmation
● DOM lent
Un naviga > kesako > Javascript
var x = 30;
var y = 40;
function add(arg1, arg2) {
return arg1 + arg2
}
var r = add(x,y)
Ne pas confondre javascript & DOM
var divHeight = div.clientHeight / 2
var div2Height = div2.clientHeight / 2
div.replaceWith(r)
div.style.height = divHeight
div2.style.height = div2Height
Un naviga > Javascript > Comment ?
● Le javascript est un langage de programmation
● DOM lent
● Le javascript est le principale déclencheur de Reflow & Repaint
Un naviga > Javascript > JS engine
Un moteur JavaScript est un programme ou un interpréteur qui exécute
le code JavaScript.
Bien qu'il existe plusieurs utilisations pour un moteur JavaScript, il est le
plus utilisé dans les navigateurs Web.
Un naviga > Javascript > JS engine
● Spider Monkey → GECKO
● V8 Engine →Google Chrome
● Nitro -> Safari
● Chaa-Kra → IExplorer
Un naviga > Javascript > Best practice
● Mettre le javascript en base de page pour ne pas bloquer le
téléchargement du DOM
● Au niveau du même module javascript ne pas faire plusieurs
aller-retour si ce n’est pas nécessaire (cause de reflow &
repaint en cascade)
● Compresser les ressources pour gagner en mémoire & bien
ordonner son javascript
Un naviga > Recapitulons
● Le navigateur utilise 3 mini-programmes pour interpréter notre code :
○ Interpréteur HTML qui crée le DOM
○ Interpréteur CSS qui fait le render tree & le css matching
○ JS Engine qui interpréte le javascript
C’est 3 mini-programmes sont de JIT Compilers
Un naviga > outils
● https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall
● https://developers.google.com/speed/docs/insights/about
● http://blogmarks.net/user/rik/marks/tag/navigateur-marche (Anthony Ricaud - 2012
- Paris Web)
● https://www.youtube.com/watch?v=SmE4OwHztCc&t=1264s (Ryan Seddon
JSConf EU 2015 )
● https://fr.slideshare.net/goetter/introduction-la-performance-web?qid=ee4f738a-2f1
6-45af-93c0-0c2e0d182df2&v=&b=&from_search=4 (Raphael Goettier - Web
performance )
● http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-
making-your-javascript-slow/ (REFLOWS & REPAINTS: CSS PERFORMANCE
MAKING YOUR JAVASCRIPT SLOW?)
Un naviga
Question

Contenu connexe

Tendances

Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasPierre-Alban DEWITTE
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejsnaholyr
 
Retour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logRetour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logJulien Maitrehenry
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture WebAdyax
 
Comment améliorer la performance de vos sites et applications web présen...
Comment améliorer la performance de vos sites et applications web    présen...Comment améliorer la performance de vos sites et applications web    présen...
Comment améliorer la performance de vos sites et applications web présen...Roland Coma
 
Les nouveautés de Firefox 3
Les nouveautés de Firefox 3Les nouveautés de Firefox 3
Les nouveautés de Firefox 3Thomas Bassetto
 
Motwin - cto crunch - 141205 - Optimiser la latence applicative mobile
Motwin -  cto crunch - 141205 - Optimiser la latence applicative mobileMotwin -  cto crunch - 141205 - Optimiser la latence applicative mobile
Motwin - cto crunch - 141205 - Optimiser la latence applicative mobileCommunity motwin
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 
Geek Time Juin 2016 : Node.js
Geek Time Juin 2016 : Node.jsGeek Time Juin 2016 : Node.js
Geek Time Juin 2016 : Node.jsOLBATI
 
Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011jimmybourassa
 
Presentation sur l'hébergement web et du cpanel
Presentation sur l'hébergement web et du cpanelPresentation sur l'hébergement web et du cpanel
Presentation sur l'hébergement web et du cpanelGilbert Girard
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webNormandie Web Xperts
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site webEmmanuel Gautier
 
Le b.a.-ba du web scraping
Le b.a.-ba du web scrapingLe b.a.-ba du web scraping
Le b.a.-ba du web scrapingAlexandre Gindre
 
Présentation Ansible Ikoula
Présentation Ansible IkoulaPrésentation Ansible Ikoula
Présentation Ansible IkoulaIkoula
 
Usages autour d’Ansible chez ikoula
Usages autour d’Ansible chez ikoulaUsages autour d’Ansible chez ikoula
Usages autour d’Ansible chez ikoulaNicolas Trauwaen
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHPJean-Marc Fontaine
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec FirephpDamien Seguy
 

Tendances (20)

Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pas
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 
Retour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logRetour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de log
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
 
Comment améliorer la performance de vos sites et applications web présen...
Comment améliorer la performance de vos sites et applications web    présen...Comment améliorer la performance de vos sites et applications web    présen...
Comment améliorer la performance de vos sites et applications web présen...
 
Les nouveautés de Firefox 3
Les nouveautés de Firefox 3Les nouveautés de Firefox 3
Les nouveautés de Firefox 3
 
Motwin - cto crunch - 141205 - Optimiser la latence applicative mobile
Motwin -  cto crunch - 141205 - Optimiser la latence applicative mobileMotwin -  cto crunch - 141205 - Optimiser la latence applicative mobile
Motwin - cto crunch - 141205 - Optimiser la latence applicative mobile
 
PHP et PHP Framework
PHP et PHP FrameworkPHP et PHP Framework
PHP et PHP Framework
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 
Geek Time Juin 2016 : Node.js
Geek Time Juin 2016 : Node.jsGeek Time Juin 2016 : Node.js
Geek Time Juin 2016 : Node.js
 
Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011
 
Presentation sur l'hébergement web et du cpanel
Presentation sur l'hébergement web et du cpanelPresentation sur l'hébergement web et du cpanel
Presentation sur l'hébergement web et du cpanel
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site web
 
Le b.a.-ba du web scraping
Le b.a.-ba du web scrapingLe b.a.-ba du web scraping
Le b.a.-ba du web scraping
 
TP bginfo
TP bginfoTP bginfo
TP bginfo
 
Présentation Ansible Ikoula
Présentation Ansible IkoulaPrésentation Ansible Ikoula
Présentation Ansible Ikoula
 
Usages autour d’Ansible chez ikoula
Usages autour d’Ansible chez ikoulaUsages autour d’Ansible chez ikoula
Usages autour d’Ansible chez ikoula
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHP
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec Firephp
 

Similaire à Un navigateur, comment ça marche

Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ? haricot
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Aymen Loukil
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
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
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Drupagora 2012 Optimisation performances Drupal
Drupagora 2012 Optimisation performances DrupalDrupagora 2012 Optimisation performances Drupal
Drupagora 2012 Optimisation performances DrupalSkilld
 
Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Quentin Frémeaux
 
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...Clément OUDOT
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007Eric D.
 
JUGSummerCamp2023-RendezMoiMonFront.pdf
JUGSummerCamp2023-RendezMoiMonFront.pdfJUGSummerCamp2023-RendezMoiMonFront.pdf
JUGSummerCamp2023-RendezMoiMonFront.pdfOlivierThierry9
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre parisPeak Ace
 

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

Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
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
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Java EE _ JSP.pdf
Java EE _ JSP.pdfJava EE _ JSP.pdf
Java EE _ JSP.pdf
 
Drupagora 2012 Optimisation performances Drupal
Drupagora 2012 Optimisation performances DrupalDrupagora 2012 Optimisation performances Drupal
Drupagora 2012 Optimisation performances Drupal
 
Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)
 
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
 
JUGSummerCamp2023-RendezMoiMonFront.pdf
JUGSummerCamp2023-RendezMoiMonFront.pdfJUGSummerCamp2023-RendezMoiMonFront.pdf
JUGSummerCamp2023-RendezMoiMonFront.pdf
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Optimisation de son site web
Optimisation de son site webOptimisation de son site web
Optimisation de son site web
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
 

Plus de Mouhamadou Moustapha CAMARA (7)

Web API - B2G
Web API - B2G Web API - B2G
Web API - B2G
 
LaTeX francophonie
LaTeX francophonie LaTeX francophonie
LaTeX francophonie
 
LaTeX ISI
LaTeX ISILaTeX ISI
LaTeX ISI
 
Gnu/Linux et Logiciel Libre
Gnu/Linux et Logiciel Libre Gnu/Linux et Logiciel Libre
Gnu/Linux et Logiciel Libre
 
Present
PresentPresent
Present
 
Pfsense
PfsensePfsense
Pfsense
 
Pourquoi linux
Pourquoi linuxPourquoi linux
Pourquoi linux
 

Un navigateur, comment ça marche

  • 1. Un navigateur, comment ça marche ? Juin 2017
  • 2. Un naviga > kesako
  • 3. Un naviga > kesako > chrome Chrome
  • 4. Un naviga > kesako > content content
  • 5. Un naviga > kesako > c’est compliqué Moteur JS Rendu de police Accessibilité systéme de cache Parseur URL Cookies Couche réseau Binding DOM Base de données Décodage d’image Téléchargement Défilement Dessin ...
  • 6. Un naviga > kesako > c’est compliqué GECKO WEBKIT BLINK WEBCORE TRIDENT OPEN SOURCE PROPRIO
  • 7. Un naviga > kesako > Début requête Requête & Réponse
  • 8. Un naviga > kesako > Début requête Supposons qu’on veut se connecter à http://www.neticoa.fr/ ● On lit l’URL : domaine, protocole ● Requête DNS : ○ www.neticoa.fr → 176.31.212.233 ● Ouverture session TCP, Requête HTTP
  • 9. Un naviga > kesako > Réponse HTTP/1.1 200 OK Content-Type: application/xhtml-xml MODE XML
  • 10. Un naviga > kesako > Réponse HTTP/1.1 200 OK Content-Type: application/xhtml-xml Content-Type: text/html <html> MODE QUIRKS
  • 11. Un naviga > kesako > Réponse HTTP/1.1 200 OK Content-Type: application/xhtml-xml Content-Type: text/html <HTML> <!DOCTYPE HTML> <HTML> MODE STANDARD
  • 12. Un naviga > kesako > Réponse HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 IL N’ESSAIE PAS DE COMPRENDRE
  • 13. Un naviga > kesako > DOM DOM
  • 14. Un naviga > kesako > DOM <!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>
  • 15. Un naviga > kesako > DOM ARBRE DOM
  • 16. Un naviga > kesako > ressources ● Image ○ Lance le téléchargement, non bloquant ○ Lance un décodeur ● CSS ○ Lance le téléchargement, non bloquant ○ Et cela commence à devenir intéressant
  • 17. Un naviga > kesako > css buckets ID CLASS TAGNAME AUTRES div div .item #sidebar div#sidebar div p :visited :visited div p.item#sidebar div#sidebar div .item div .item #sidebar p #sidebar p
  • 18. Un naviga > kesako > CSS MATCHING
  • 19. Un naviga > kesako > Render tree
  • 20. Un naviga > kesako > COMBINAISON HTML CSS DOM TREE Style Rules RENDER TREE REFLOW
  • 21. Un naviga > kesako > reflow - layout Reflow est le processus du navigateur Web pour recalculer les positions et les géométries des éléments dans le document afin de retransmettre une partie ou la totalité du document.
  • 22. Un naviga > kesako > reflow - layout
  • 23. Un naviga > kesako > COMBINAISON HTML CSS DOM TREE Style Rules RENDER TREE REFLOW PAINTING
  • 24. Un naviga > kesako > painting Painting(re-painting) se produit lorsque des modifications sont apportées à un élément qui modifie la visibilité, mais n'affecte pas sa mise en page. Exemple: http://www.neticoa.sn/#group
  • 25. Un naviga > kesako > ressources ● Image ○ Lance le téléchargement, non bloquant ○ Lance un décodeur ● CSS ○ Lance le téléchargement, non bloquant ● Javascript ○ Lance le téléchargement, presque bloquant
  • 26. Un naviga > Javascript > Comment ? ● Le javascript est un langage de programmation ● DOM lent
  • 27. Un naviga > kesako > Javascript var x = 30; var y = 40; function add(arg1, arg2) { return arg1 + arg2 } var r = add(x,y) Ne pas confondre javascript & DOM var divHeight = div.clientHeight / 2 var div2Height = div2.clientHeight / 2 div.replaceWith(r) div.style.height = divHeight div2.style.height = div2Height
  • 28. Un naviga > Javascript > Comment ? ● Le javascript est un langage de programmation ● DOM lent ● Le javascript est le principale déclencheur de Reflow & Repaint
  • 29. Un naviga > Javascript > JS engine Un moteur JavaScript est un programme ou un interpréteur qui exécute le code JavaScript. Bien qu'il existe plusieurs utilisations pour un moteur JavaScript, il est le plus utilisé dans les navigateurs Web.
  • 30. Un naviga > Javascript > JS engine ● Spider Monkey → GECKO ● V8 Engine →Google Chrome ● Nitro -> Safari ● Chaa-Kra → IExplorer
  • 31. Un naviga > Javascript > Best practice ● Mettre le javascript en base de page pour ne pas bloquer le téléchargement du DOM ● Au niveau du même module javascript ne pas faire plusieurs aller-retour si ce n’est pas nécessaire (cause de reflow & repaint en cascade) ● Compresser les ressources pour gagner en mémoire & bien ordonner son javascript
  • 32. Un naviga > Recapitulons ● Le navigateur utilise 3 mini-programmes pour interpréter notre code : ○ Interpréteur HTML qui crée le DOM ○ Interpréteur CSS qui fait le render tree & le css matching ○ JS Engine qui interpréte le javascript C’est 3 mini-programmes sont de JIT Compilers
  • 33. Un naviga > outils ● https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall ● https://developers.google.com/speed/docs/insights/about ● http://blogmarks.net/user/rik/marks/tag/navigateur-marche (Anthony Ricaud - 2012 - Paris Web) ● https://www.youtube.com/watch?v=SmE4OwHztCc&t=1264s (Ryan Seddon JSConf EU 2015 ) ● https://fr.slideshare.net/goetter/introduction-la-performance-web?qid=ee4f738a-2f1 6-45af-93c0-0c2e0d182df2&v=&b=&from_search=4 (Raphael Goettier - Web performance ) ● http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance- making-your-javascript-slow/ (REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?)