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