Présentation du préchargement NoState

Katie Hempenius

Publié le 20 juillet 2018

Introduction

NoState Prefetch est un nouveau mécanisme de 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, mais contrairement au prérendu, il n'exécute pas JavaScript ni n'affiche aucune partie de la page à l'avance. L'objectif de la prélecture NoState est d'utiliser moins de mémoire que le prérendu, tout en réduisant les temps de chargement des pages.

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

Cet article explique comment fonctionne NoStatePrefetch, les raisons de son introduction et les instructions pour utiliser les histogrammes de Chrome afin d'afficher des statistiques sur son utilisation.

Motivation

Deux raisons principales ont motivé l'introduction du préchargement NoState :

Réduire l'utilisation de la mémoire

La prélecture NoState n'utilise qu'environ 45 Mio de mémoire. La maintenance du scanner de préchargement est la principale dépense de mémoire pour le préchargement NoState, et ce coût reste relativement constant pour différents cas d'utilisation. L'augmentation de la taille ou du volume des extractions n'a pas d'effet significatif sur la quantité de mémoire consommée par le préchargement NoState.

En revanche, le prérendu consomme généralement 100 Mio de mémoire, et la consommation de mémoire est plafonnée à 150 Mio. Cette forte consommation de mémoire le rend inadapté aux appareils bas de gamme (c'est-à-dire avec une RAM inférieure ou égale à 512 Mo). Par conséquent, Chrome ne prérend pas les pages sur les appareils bas de gamme et se connecte à l'avance.

Faciliter 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 du stockage local ou de session) ne doit se produire. Toutefois, il peut être difficile et complexe d'empêcher ces actions de se produire lors du rendu d'une page. Le préchargement NoState ne récupère que les ressources à l'avance : il n'exécute pas de code ni n'affiche la page. Cela simplifie la prévention des actions avec état et visibles par l'utilisateur.

Implémentation

Les étapes suivantes expliquent comment fonctionne NoState Prefetch.

1. NoStatePrefetch est déclenché.

   Un indice de ressource de prérendu (c'est-à-dire <link rel="prerender">) et certaines fonctionnalités Chrome déclenchent la prélecture NoState à condition que les deux conditions suivantes soient remplies : a) l'utilisateur n'utilise pas un appareil bas de gamme, et b) l'utilisateur n'utilise pas un réseau mobile.

2. Un nouveau moteur de rendu dédié est créé pour la prélecture NoState.

   Dans Chrome, un 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 sans état, possède son propre moteur de rendu pour assurer l'isolation. Cela permet de minimiser les conséquences 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 la prélecture NoState est récupérée. Le HTMLPreloadScanner analyse ensuite cette ressource pour découvrir les sous-ressources à récupérer. Si la ressource principale ou l'une de ses sous-ressources possède un service worker enregistré, ces requêtes passeront par le service worker approprié.

   La prélecture NoState ne prend en charge que la méthode HTTP GET. Elle ne récupère aucune sous-ressource nécessitant l'utilisation d'autres méthodes HTTP. De plus, il ne récupérera aucune ressource nécessitant des actions de l'utilisateur (par exemple, les pop-ups d'authentification, le certificat client SSL ou les remplacements manuels).

4. Les sous-ressources récupérées le seront avec une priorité réseau "IDLE".

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

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

   NoState Prefetch met en cache toutes les ressources, à l'exception de celles qui comportent l'en-tête Cache-Control no-store. Une ressource sera revalidée avant utilisation si elle comporte un en-tête de réponse Vary ou 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 n'apporte aucune modification d'état, à l'exception de la mise à jour du magasin de cookies et du cache DNS local. Il est important de le préciser, car il s'agit de l'état "NoState" dans "NoState Prefetch".

   À ce stade du processus de chargement de page "normal", le navigateur effectuerait probablement des actions qui modifieraient son état : par exemple, exécuter du code JavaScript, modifier sessionStorage ou localStorage, lire de la musique ou des vidéos, utiliser l'API History ou inviter l'utilisateur à effectuer une action. Les seules modifications d'état qui se produisent dans NoState-Prefetch 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érendue, la page ne sera pas immédiatement visible. Le navigateur devra toujours la rendre. Le navigateur ne réutilisera pas le moteur de rendu qu'il a utilisé pour la prélecture NoState, mais utilisera un nouveau moteur de rendu. Le fait de ne pas afficher la page à l'avance réduit la consommation de mémoire de NoStatePrefetch, mais aussi l'impact possible sur les temps de chargement des pages.

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

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

Impact sur l'analyse d'audience Web

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

Les scripts d'analyse côté client enregistrent une page vue lorsque la page est affichée à l'utilisateur. Ces scripts reposent sur l'exécution de JavaScript, alors que la prélecture sans état n'exécute aucun code JavaScript.

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

Découvrir

NoStatePrefetch a été déployé 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 recherche Google
• Récupérer les pages que la barre d'adresse Chrome prévoit que vous êtes susceptible de consulter ensuite

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

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

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

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