Navigateur : les coulisses du chargement

estelle.github.io/browsers

Performance web

performance web EST expérience utilisateurs

Expérience Utilisateurs

UX
Performance
Internationalisation
Accessibilité
Sécurité
Confidentialité

Performance web

Temps d'interactivité
Serveur
PerformanceTiming API
Première peinture de contentement (FCP)
Jank
Performances perçues

Le Navigateur

image: Navigateur

Le Navigateur : ennemi #1

le temps nécessaire pour obtenir toutes les ressources de tous les serveurs

Le Navigateur : ennemie et amie

image: fil

Les réseaux mobiles

Le plus long délai est l'aller-rotoure entre le téléphone et la tour cellulaire. L'air est la cause de la plus grande latence

Les pouvoir mobiles

Les navigateurs mobiles sont super puissants. Les appareils mobiles ne sont pas

Le Navigateur

image: serveur

Le Navigateur

image: navigateur avec la page duck-duck-go

Le Navigateur

image: page web avec les resultats de duck-duck-go

Le Navigateur

image: navigateur tout blanc

<!doctype HTML>
<html lang="fr-fr">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Ma Page</h1>
  <p>Un paragraph avec un <a href="//example.com">lien</a></p>
  <figure>
    <img src="monImage.jpg" alt="description de l'image"/>
    <caption>Ma photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

Ce n'est pas si simple...

Performance Web

Les coulisses du chargement

La navigation
La reponse
L'analyse
Le rendu

Interaction utilisateur

La navigation

image: page web avec les resultats de duck-duck-go

La navigation

image: navigateur tout blanc

La navigation

←←←

←←←

Ce n'est pas si simple...

DNS

DNS = "l'emplacement des actifs"

Recherche DNS

www.example.com
93.184.216.34

Recherche DNS

www.example.com == 93.184.216.34

Browser cache
Local (OS) cache
Router cache
Resolver server (Usually your Internet Service Provider).
Root server (.com, .fr)
Top level domain server
Authoritative name servers (ns3.example.com)

Étapes de la demande

Recherche DNS

→→→ www.example.com →→→
←←← 93.184.216.34 ←←←

Recherche DNS

→→→ URL →→→
←←← IP ←←←

Prochainment?

?

Négociation TCP

Négociation de liaison TCP à trois voies

TCP handshake

Négociation TCP

Établissement d'une connexion

→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→

L'hôte, généralement le navigateur, envoie un paquet TCP SYNchronize au serveur. Le serveur reçoit le SYN et renvoie un accusé de réception SYNchronize. L'hôte reçoit le SYN-ACK du serveur et envoie un acquittement. Le serveur reçoit ACK et la connexion de socket TCP est établie.

Négociation TCP

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→

Negotiation TLS

Détermine le chiffrement pour la communication

Negotiation TLS

→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→
→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→
→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→
→→→ HTTP-GET-REQUEST →→→

La demande

→→→ HTTP-GET-REQUEST →→→

La reponse

←←←

Ce n'est pas si simple...

La reponse

←←←

←←←

TCP Slow Start

Algorithme pour détecter la bande passante disponible

⇔ DNS ⇔
⇔ SYN-SYN-ACK ⇔
⇔ TLS ⇔
→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
←←← 112kb ←←←
. . .

Congestion control

Confirme la livraison en renvoyant ACK, les accusés de réception

⇔ DNS ⇔
⇔ SYN-SYN-ACK ⇔
⇔ TLS ⇔
→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
. . .

Congestion control

Confirme la livraison en renvoyant ACK, les accusés de réception

→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
←←← 112kb ←←←
. . .
←←← 56kb ←←←
→→→ ACK →→→
. . .

Reponse

<!doctype HTML>
<html lang="fr-fr">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Ma Page</h1>
  <p>Un paragraph avec un <a href="//example.com">lien</a></p>
  <figure>
    <img src="monImage.jpg" alt="description de l'image"/>
    <caption>Ma photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

L'analyse

DOM
CSSOM
AOM
AST / Compilation JS

Ce n'est pas si simple

Commence immediatement (14kb)
Main thread
Scanner de préchargement
chemin de rendu critique = 5 etapes

DOM

Décrit le contenu

DOM

Scanner de préchargement

Demande les ressources hautement prioritaires

<link rel="stylesheet" src="styles.css"/>
<script src="myscript.js" async></script>
<img src="monImage.jpg" alt="description de l'image"/>
<script src="unautrescript.js" defer></script>

JavaScript

<script>	RENDER	PAUSE		RENDER
		DOWNLOAD JS
			EXECUTE JS

<script defer>	RENDER
		DOWNLOAD
					EXECUTE

<script async>	RENDER		PAUSE	RENDER
		DOWNLOAD
			EXECUTE

DOM

DOM

<!doctype HTML>
<html lang="fr-fr">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Ma Page</h1>
  <p>Un paragraph avec un <a href="//example.com">lien</a></p>
  <figure>
    <img src="monImage.jpg" alt="description de l'image"/>
    <caption>Ma photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

CSSOM

Décrit les règles de style

CSSOM

:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
figure img {
  border: none;
  width: 100%;
}

CSSOM

:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
figure img {
  border: none;
  width: 100%;
}

CSSOM

:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
img {
  border: none;
  width: 100%;
}

AOM

image: screen shot of accessiblity tab showing accessiblity names

Jusqu'à la construction de l'AOM, le contenu n'est pas accessible aux lecteurs d'écran.

Compilation JavaScript

interprété
compilé ^*
analysé
exécuté ^**

^*Analysés dans des arbres à syntaxe abstraite, générant code optimize et/ou binaire exécuté sur le thread principal.

^**Générera une erreur si JavaScript est exécute sur un nœud DOM qui n'a pas encore été rencontré

Screen shot of a simple javascript event handler in ASTExplorer.net

Le rendu

Style
Layout
Paint
Compositing

Thread Principal

Analyse HTML / Creation du DOM
Analyse CSS / Creation du CSSOM
Conversion to JS en JS AST
Exécution javascript
Analyse du DOM et CSSOM / Rendu

Le rendu

DOM et CSSOM: combinés pour former l’arbre de rendu. Contient que les nœuds nécessaires au rendu de la page.

Style

La creation du "Render Tree" - Computed Styles

UA stylesheets
User style sheets
Cascade
visibility: hidden: oui
display: none: non

Détermine les règles CSS pour chaque nœud visible (et caché).

Layout

Calcule la disposition de chaque élément visible

Détermine les dimensions de tous les nœuds de l'arbre de rendu

Layout

img {
    width: 100%;
    
  }

<img src="monImage.jpg" alt="description de l'image"/>

Layout (Nouveau)

img {
    width: 100%;
    height: auto;
  }

<img src="monImage.jpg" alt="description de l'image"
    width="100" height="100"/>

Paint

Rend les pixels à l'écran
Nombre de pixels = h * w * dppx
Détermine le [r, g, b, a] pour chaque pixel.
Frame buffer = tableau de tableau [r, g, b, a]
first paint / first meaningful paint

Composite: Paint layers on the GPU

animer l'opacité ou les transformations
3D transforms
z-index supérieur
<video> and <canvas>
Filtres CSS
will-change property
isolation: isolate

Vitte sur le GPU

Fusionne les couches pour calculer la
valeur RGBA de chaque pixel

[255, 165, 0, 1]

[0, 0, 0, 0.2]

[204, 132, 0, 1]

Reflow

When a change is made:

re-style
re-layout
re-paint
re-composite

Recalculer presque tout!

Reflow

img {
    width: 100%;
    
  }

<img src="monImage.jpg" alt="description de l'image"/>

Re-Layout pas necessaire

img {
    width: 100%;
    height: auto;
  }

<img src="monImage.jpg" alt="description de l'image"
    width="100" height="100"/>

re-style
re-layout
re-paint
re-composite?

Interaction de l'utilisateur

Le but

Pas de embouteillage sur le thread principal. Que ca peut repondre a l'utilisateur en moins de 50ms, et peut anime en moins de 16.67ms (60fps)

jank
scroll
user interaction
animation

Merci

https://estelle.github.com/browsers

Estelle Weyl

standardista.com
PerfMattersConf.com
@estellevw
@standardista