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

Le Navigateur

image: Navigateur

Le Navigateur : ennemi #1

timer server

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

  1. La navigation
  2. La reponse
  3. L'analyse
  4. Le rendu

Interaction utilisateur

La navigation

La navigation

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

La navigation

image: navigateur tout blanc

La navigation

lap top computer
←←←
HTML content
←←←
server

Ce n'est pas si simple...

DNS

DNS = "l'emplacement des actifs"

Recherche DNS

  • www.example.com

    human thinking
  • 93.184.216.34

    computer thinking

Recherche DNS

www.example.com == 93.184.216.34
  1. Browser cache
  2. Local (OS) cache
  3. Router cache
  4. Resolver server (Usually your Internet Service Provider).
  5. Root server (.com, .fr)
  6. Top level domain server
  7. Authoritative name servers (ns3.example.com)

Étapes de la demande

Recherche DNS

lap top computer
  • →→→ www.example.com →→→
    ←←← 93.184.216.34 ←←←
server

Recherche DNS

lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
server

Prochainment?

lap top computer
    →→→ ? →→→
server

Négociation TCP

Négociation de liaison TCP à trois voies

TCP handshake

Négociation TCP

Établissement d'une connexion

lap top computer
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
server

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

lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
server

Negotiation TLS

Détermine le chiffrement pour la communication

Negotiation TLS

lap top computer
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
server
lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
  •  
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
server
lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
  •  
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
  • →→→ HTTP-GET-REQUEST →→→
server

La demande

lap top computer
  • →→→ HTTP-GET-REQUEST →→→
server

La reponse

La reponse

lap top computer
←←←
HTML content
←←←
server

Ce n'est pas si simple...

La reponse

lap top computer
←←←
HTML web page cut in half
←←←
server

TCP Slow Start

Algorithme pour détecter la bande passante disponible

lap top computer
  • DNS
  • SYN-SYN-ACK
  • TLS
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    ←←← 112kb ←←←
  • . . .
server

Congestion control

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

lap top computer
  • DNS
  • SYN-SYN-ACK
  • TLS
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    . . .
server

Congestion control

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

lap top computer
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    ←←← 112kb ←←←
    . . .
  • ←←← 56kb ←←←
    →→→ ACK →→→
    . . .
server

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

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>
pas le thread principal

JavaScript

<script> RENDER         PAUSE RENDER
DOWNLOAD JS
EXECUTE JS
<script defer> RENDER
DOWNLOAD
EXECUTE
<script async> RENDER PAUSE RENDER
DOWNLOAD
EXECUTE

DOM

DOM

DOM tree

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

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

CSSOM

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

  1. interprété
  2. compilé *
  3. analysé
  4. 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

Le rendu

  1. Style
  2. Layout
  3. Paint
  4. Compositing

Thread Principal

Main thread
  1. Analyse HTML / Creation du DOM
  2. Analyse CSS / Creation du CSSOM
  3. Conversion to JS en JS AST
  4. Exécution javascript
  5. 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.

render process

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

screen shot of mobile screen
img {
    width: 100%;
    
  }
<img src="monImage.jpg" alt="description de l'image"/>

Layout (Nouveau)

screen shot of mobile screen
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:

  1. re-style
  2. re-layout
  3. re-paint
  4. re-composite

Recalculer presque tout!

Reflow

screen shot of mobile screen
img {
    width: 100%;
    
  }
<img src="monImage.jpg" alt="description de l'image"/>

Re-Layout pas necessaire

screen shot of mobile screen
img {
    width: 100%;
    height: auto;
  }
<img src="monImage.jpg" alt="description de l'image"
    width="100" height="100"/>
  1. re-style
  2. re-layout
  3. re-paint
  4. 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
@estellevw