Présentation du préchargement NoState

Katie Hempenius

Introduction

Le préchargement NoState est un nouveau mécanisme dans Chrome qui remplace le processus de prérendu obsolète, utilisé pour alimenter des fonctionnalités telles que <link rel="prerender">. Comme le prérendu, il récupère les ressources à l'avance. Contrairement au prérendu, il n'exécute pas JavaScript ni n'affiche aucune partie de la page à l'avance. L'objectif du préchargement NoState est d'utiliser moins de mémoire que le prérendu, tout en réduisant les temps de chargement des pages.

Le préchargement NoState n'est pas une API, mais un mécanisme utilisé par Chrome pour implémenter diverses API et fonctionnalités. L'API Resource Hints, ainsi que le préchargement des pages par la barre d'adresse Chrome, sont tous deux implémentés à l'aide de la précharge NoState. Si vous utilisez Chrome 63 ou une version ultérieure, votre navigateur utilise déjà la précharge NoState pour des fonctionnalités telles que <link rel="prerender">.

Cet article explique le fonctionnement de NoStatePrefetch, les raisons de son introduction et comment utiliser les histogrammes de Chrome pour afficher des statistiques sur son utilisation.

Motivation

L'introduction de la précharge NoState a été motivée par deux raisons principales:

Réduire l'utilisation de la mémoire

La précharge NoState n'utilise que 45 Mo de mémoire. La maintenance du scanner de préchargement est la principale dépense de mémoire pour le préchargement NoState. Ce coût reste relativement constant d'un cas d'utilisation à l'autre. L'augmentation de la taille ou du volume des récupérations n'a pas d'incidence significative sur la quantité de mémoire consommée par le préchargement NoState.

En revanche, le prérendu consomme généralement 100 Mo de mémoire, et la consommation de mémoire est limitée à 150 Mo. Cette forte consommation de mémoire ne convient pas aux appareils bas de gamme (c'est-à-dire 512 Mo de RAM ou moins). Par conséquent, Chrome n'effectue pas de prérendu sur les appareils bas de gamme, mais préconnecte.

Facilitation de la prise en charge des nouvelles fonctionnalités de la plate-forme Web

Avec le prérendu, aucune action visible par l'utilisateur (par exemple, la lecture de musique ou de vidéo) ni aucune action avec état (par exemple, la modification de la session ou du stockage local) ne doit se produire. Toutefois, il peut être difficile et complexe d'empêcher ces actions de se produire lors de l'affichage d'une page. Le préchargement NoState ne récupère que des ressources à l'avance: il n'exécute pas de code ni n'affiche pas la page. Cela permet de plus facilement empêcher les actions orientées utilisateur et basées sur l'état de se produire.

Implémentation

Les étapes suivantes expliquent le fonctionnement de la précharge NoState.

1. NoStatePrefetch est déclenché.

   Un indice de ressource de préchargement (par exemple, <link rel="prerender">) et certaines fonctionnalités Chrome déclenchent le préchargement NoState à condition que les deux conditions suivantes soient remplies: a) l'utilisateur ne se trouve pas sur un appareil bas de gamme et b) l'utilisateur ne se trouve pas sur un réseau mobile.

2. Un nouveau moteur de rendu dédié est créé pour le préchargement NoState.

   Dans Chrome, un moteur de rendu est un processus chargé de prendre un document HTML, de l'analyser, de construire son arbre de rendu et de peindre le résultat à l'écran. Chaque onglet de Chrome, ainsi que chaque processus de préchargement NoState, dispose de son propre moteur de rendu pour assurer l'isolation. Cela permet de minimiser les effets d'un problème (par exemple, un plantage d'onglet) et d'empêcher le code malveillant d'accéder à d'autres onglets ou à d'autres parties du système.

3. La ressource chargée avec le préchargement NoState est récupérée. HTMLPreloadScanner analyse ensuite cette ressource pour détecter les sous-ressources à extraire. Si la ressource principale ou l'une de ses sous-ressources dispose d'un service worker enregistré, ces requêtes seront transmises au service worker approprié.

   Le préchargement NoState n'est compatible qu'avec la méthode HTTP GET. Il ne récupère aucune sous-ressource nécessitant l'utilisation d'autres méthodes HTTP. De plus, il n'extrait aucune ressource nécessitant des actions de l'utilisateur (par exemple, des pop-ups d'authentification, un certificat client SSL ou des forçages manuels).

4. Les sous-ressources extraites sont extraites avec une priorité nette "INACTIVE".

   La priorité réseau "INACTIVE" est la priorité réseau la plus faible possible dans Chrome.

5. Toutes les ressources récupérées par le préchargement NoState sont mises en cache en fonction de leurs en-têtes de cache.

   La précharge NoState met en cache toutes les ressources, sauf celles avec l'en-tête Cache-Control no-store. Une ressource est revalidée avant utilisation si elle comporte un en-tête de réponse Vary, un en-tête Cache-Control no-cache ou si elle date de plus de cinq minutes.

6. Le moteur de rendu est arrêté une fois toutes les sous-ressources chargées.

   Si les sous-ressources expirent, le moteur de rendu est arrêté au bout de 30 secondes.

7. Le navigateur ne modifie pas l'état, sauf pour mettre à jour le magasin de cookies et le cache DNS local. Il est important de le souligner, car il s'agit de la partie "NoState" de "préchargement NoState".

   À ce stade du processus de chargement de page "normal", le navigateur effectuerait probablement des actions qui modifieraient son état: par exemple, exécuter JavaScript, modifier sessionStorage ou localStorage, lire de la musique ou des vidéos, utiliser l'API History ou demander à l'utilisateur. Les seules modifications d'état qui se produisent dans la précharge NoState sont la mise à jour du cache DNS lorsque les réponses arrivent et la mise à jour du magasin de cookies si une réponse contient l'en-tête Set-Cookie.

8. Lorsque la ressource est nécessaire, elle est chargée dans la fenêtre du navigateur.

   Toutefois, contrairement à une page prérendu, la page n'est pas immédiatement visible. Elle doit toujours être affichée par le navigateur. Le navigateur ne réutilisera pas le moteur de rendu qu'il a utilisé pour le préchargement NoState et utilisera plutôt un nouveau moteur de rendu. Ne pas afficher la page à l'avance réduit la consommation de mémoire de NoStatePrefetch, mais réduit également l'impact potentiel qu'il peut avoir sur les temps de chargement de la page.

   Si la page comporte un service worker, ce chargement de page passera à nouveau par le service worker.

   Si la précharge NoState n'a pas terminé de récupérer les sous-ressources au moment où la page est nécessaire, le navigateur poursuit le processus de chargement de la page à partir de l'endroit où la précharge NoState s'est arrêtée. Le navigateur doit toujours récupérer des ressources, mais pas autant que si la précharge NoState n'avait pas été lancée.

Impact sur Web Analytics

Les pages chargées à l'aide de la précharge NoState sont enregistrées par les outils d'analyse Web à des moments légèrement différents, selon que l'outil collecte des données côté client ou côté serveur.

Les scripts d'analyse côté client enregistrent une page vue lorsque la page est présentée à l'utilisateur. Ces scripts s'appuient sur l'exécution de JavaScript, et NoState Prefetch n'exécute aucun code JavaScript.

Les outils d'analyse côté serveur enregistrent des métriques lorsqu'une requête est traitée. Pour les ressources chargées via le préchargement NoState, il peut y avoir un écart de temps important entre le moment où une requête est traitée et celui où la réponse est réellement utilisée par le client (le cas échéant). Depuis Chrome 69, le préchargement sans état ajoute l'en-tête Purpose: Prefetch à toutes les requêtes afin de les distinguer de la navigation normale.

Découvrir

NoStatePrefetch a été publié en décembre 2017 dans Chrome 63. Il est actuellement utilisé pour:

• Implémenter l'optimisation de ressource prerender
• Récupérer le premier résultat de la recherche Google
• Récupérer les pages que la barre d'adresse de Chrome prévoit que vous êtes susceptible de consulter ensuite

Vous pouvez utiliser les informations internes de Chrome pour voir comment vous avez utilisé NoStatePrefetch.

Pour afficher la liste des sites qui ont été chargés avec la précharge NoState, accédez à chrome://net-internals/#prerender.

Pour afficher les statistiques sur votre utilisation de la précharge NoState, accédez à chrome://histograms et recherchez "NoStatePrefetch". Il existe trois histogrammes NoStatePrefetch différents, un pour chaque cas d'utilisation de la précharge NoState:

• "NoStatePrefetch" (statistiques sur l'utilisation par les optimisations de ressources de prérendu)
• "gws_NoStatePrefetch" (statistiques sur l'utilisation par la page des résultats de recherche Google)
• "omnibox_NoStatePrefetch" (statistiques sur l'utilisation par la barre d'adresse de Chrome)