Jetzt neu: NoState Prefetch

Katie Hempenius
Katie Hempenius

Einführung

NoState Prefetch ist ein neuer Mechanismus in Chrome, der eine Alternative zum veralteten Prerendering-Prozess darstellt, der für Funktionen wie <link rel="prerender"> verwendet wird. Wie beim Pre-Rendering werden Ressourcen im Voraus abgerufen. Im Gegensatz zum Pre-Rendering wird jedoch kein JavaScript ausgeführt und kein Teil der Seite im Voraus gerendert. Das Ziel von NoState Prefetch ist es, weniger Arbeitsspeicher als beim Prerendering zu verwenden und gleichzeitig die Seitenladezeiten zu reduzieren.

NoState Prefetch ist keine API, sondern ein Mechanismus, mit dem Chrome verschiedene APIs und Funktionen implementiert. Sowohl die Resource Hints API als auch das Prefetching von Seiten über die Chrome-Adressleiste werden mit NoState Prefetch implementiert. Wenn Sie Chrome 63 oder höher verwenden, nutzt Ihr Browser bereits NoState Prefetch für Funktionen wie <link rel="prerender">.

In diesem Artikel wird erläutert, wie NoStatePrefetch funktioniert, warum wir diese Funktion eingeführt haben und wie Sie mithilfe der Diagramme in Chrome Statistiken zur Nutzung abrufen können.

Motivation

Es gab zwei Hauptgründe für die Einführung von NoState Prefetch:

Arbeitsspeichernutzung reduzieren

NoState Prefetch belegt nur etwa 45 MiB Arbeitsspeicher. Die Aufrechterhaltung des Preloaders ist der Hauptspeicheraufwand für NoState Prefetch. Dieser Aufwand bleibt bei verschiedenen Anwendungsfällen relativ konstant. Eine Erhöhung der Größe oder des Volumens der Abrufe hat keine erheblichen Auswirkungen auf die Menge des von NoState Prefetch verbrauchten Arbeitsspeichers.

Beim Pre-Rendering werden dagegen in der Regel 100 MiB Arbeitsspeicher benötigt und der Arbeitsspeicherverbrauch ist auf 150 MiB begrenzt. Aufgrund des hohen Arbeitsspeicherverbrauchs ist sie für Low-End-Geräte (d.h. mit weniger als 512 MB RAM) nicht geeignet. Daher wird auf Low-End-Geräten kein Prerendering durchgeführt, sondern stattdessen eine Vorabverbindung hergestellt.

Unterstützung neuer Funktionen der Webplattform erleichtern

Beim Prerendering sollten keine nutzerseitigen Aktionen (z.B. Wiedergabe von Musik oder Video) oder zustandsabhängigen Aktionen (z.B. Änderung des Sitzungs- oder lokalen Speichers) ausgeführt werden. Es kann jedoch schwierig und komplex sein, diese Aktionen beim Rendern einer Seite zu verhindern. Beim NoState-Vorabruf werden nur Ressourcen im Voraus abgerufen. Es wird kein Code ausgeführt und die Seite nicht gerendert. So lässt sich leichter verhindern, dass nutzerorientierte und zustandsabhängige Aktionen ausgeführt werden.

Implementierung

In den folgenden Schritten wird erläutert, wie NoState Prefetch funktioniert.

  1. NoStatePrefetch wird ausgelöst.

    Ein Pre-Render-Ressourcenhinweis (z.B. <link rel="prerender">) und einige Chrome-Funktionen lösen NoState Prefetch aus, sofern die folgenden beiden Bedingungen erfüllt sind: a) Der Nutzer verwendet kein Low-End-Gerät und b) er ist nicht mit einem Mobilfunknetz verbunden.

  2. Für die NoState-Vorabruf-Funktion wird ein neuer, spezieller Renderer erstellt.

    In Chrome ist ein Renderer ein Prozess, der ein HTML-Dokument entgegennimmt, es analysiert, seinen Renderbaum erstellt und das Ergebnis auf dem Bildschirm darstellt. Jeder Tab in Chrome und jeder NoState-Prefetch-Prozess haben einen eigenen Renderer, um eine Isolation zu ermöglichen. So lassen sich die Auswirkungen von Fehlern (z.B. ein Absturz eines Tabs) minimieren und verhindern, dass Schadcode auf andere Tabs oder andere Teile des Systems zugreift.

  3. Die Ressource, die mit NoState Prefetch geladen wird, wird abgerufen. Der HTMLPreloadScanner sucht dann in dieser Ressource nach allen untergeordneten Ressourcen, die abgerufen werden müssen. Wenn die Hauptressource oder eine ihrer untergeordneten Ressourcen einen registrierten Dienst-Worker hat, werden diese Anfragen über den entsprechenden Dienst-Worker gesendet.

    NoState Prefetch unterstützt nur die HTTP-Methode GET. Es werden keine Unterressourcen abgerufen, für die andere HTTP-Methoden erforderlich sind. Außerdem werden keine Ressourcen abgerufen, für die Nutzeraktionen erforderlich sind (z.B. Authentifizierungs-Pop-ups, SSL-Clientzertifikate oder manuelle Überschreibungen).

  4. Abgerufene Unterressourcen werden mit der Nettopriorität „IDLE“ abgerufen.

    „IDLE“ ist die niedrigste mögliche Net-Priorität in Chrome.

  5. Alle vom NoState-Prefetch abgerufenen Ressourcen werden gemäß ihren Cache-Headern im Cache gespeichert.

    Bei der NoState-Vorabruf-Funktion werden alle Ressourcen mit Ausnahme derjenigen mit dem Cache-Control-no-store-Header im Cache gespeichert. Eine Ressource wird vor der Verwendung noch einmal validiert, wenn ein Vary-Antwortheader oder ein no-cache-Cache-Control-Header vorhanden ist oder die Ressource älter als 5 Minuten ist.

  6. Der Renderer wird beendet, nachdem alle untergeordneten Ressourcen geladen wurden.

    Wenn bei Unterressourcen eine Zeitüberschreitung auftritt, wird der Renderer nach 30 Sekunden beendet.

  7. Der Browser nimmt keine Zustandsänderungen vor, außer dass der Cookie-Speicher und der lokale DNS-Cache aktualisiert werden. Das ist wichtig, weil dies der „NoState“ in „NoState Prefetch“ ist.

    An diesem Punkt des „normalen“ Seitenladevorgangs würde der Browser wahrscheinlich Aktionen ausführen, die den Browserstatus ändern: z. B. JavaScript ausführen, sessionStorage oder localStorage mutieren, Musik oder Videos abspielen, die History API verwenden oder den Nutzer auffordern. Die einzigen Statusänderungen, die bei der NoState-Vorabruf-Technologie auftreten, sind die Aktualisierung des DNS-Caches, wenn Antworten eingehen, und die Aktualisierung des Cookie-Speichers, wenn eine Antwort den Set-Cookie-Header enthält.

  8. Wenn die Ressource benötigt wird, wird sie in das Browserfenster geladen.

    Im Gegensatz zu einer vorab gerenderten Seite ist die Seite jedoch nicht sofort sichtbar. Sie muss noch vom Browser gerendert werden. Der Browser verwendet nicht den Renderer, der für die NoState-Vorabruf-Funktion verwendet wurde, sondern einen neuen Renderer. Wenn die Seite nicht vorab gerendert wird, wird nicht nur der Arbeitsspeicherverbrauch von NoStatePrefetch reduziert, sondern auch die möglichen Auswirkungen auf die Seitenladezeiten.

    Wenn die Seite einen Service Worker hat, wird dieser Seitenladevorgang noch einmal über den Service Worker ausgeführt.

    Wenn NoState Prefetch den Abruf der Unterressourcen nicht abgeschlossen hat, bis die Seite benötigt wird, fährt der Browser mit dem Seitenladevorgang fort, wo NoState Prefetch aufgehört hat. Der Browser muss zwar noch Ressourcen abrufen, aber nicht so viele, wie erforderlich wären, wenn NoState Prefetch nicht gestartet worden wäre.

Auswirkungen auf Web Analytics

Seiten, die mit NoState Prefetch geladen werden, werden von Webanalysetools zu etwas unterschiedlichen Zeiten registriert, je nachdem, ob das Tool Daten auf der Client- oder Serverseite erfasst.

Clientseitige Analysescripts erfassen einen Seitenaufruf, wenn die Seite dem Nutzer angezeigt wird. Diese Scripts erfordern die Ausführung von JavaScript. Bei NoState Prefetch wird jedoch kein JavaScript ausgeführt.

Mit serverseitigen Analysetools werden Messwerte erfasst, wenn eine Anfrage verarbeitet wird. Bei Ressourcen, die über NoState Prefetch geladen werden, kann es eine erhebliche Zeitspanne zwischen der Bearbeitung einer Anfrage und der tatsächlichen Verwendung der Antwort durch den Client geben (falls überhaupt). Seit Chrome 69 wird bei der NoState-Vorabfüllung allen Anfragen der Header Purpose: Prefetch hinzugefügt, damit sie sich von normalen Browseranfragen unterscheiden lassen.

Jetzt ansehen

NoStatePrefetch wurde im Dezember 2017 in Chrome 63 eingeführt. Sie wird derzeit für Folgendes verwendet:

  • Ressourcenhinweis prerender implementieren
  • Erstes Ergebnis in den Google-Suchergebnissen abrufen
  • Seiten abrufen, die laut der Chrome-Adressleiste wahrscheinlich als Nächstes besucht werden

Mit den Chrome-internen Daten können Sie sehen, wie Sie NoStatePrefetch verwendet haben.

Eine Liste der Websites, die mit NoState Prefetch geladen wurden, finden Sie unter chrome://net-internals/#prerender.

Wenn Sie Statistiken zur Nutzung von NoState Prefetch aufrufen möchten, rufen Sie chrome://histograms auf und suchen Sie nach „NoStatePrefetch“. Es gibt drei verschiedene NoState Prefetch-Histogramme, eines für jeden Anwendungsfall von NoState Prefetch:

  • „NoStatePrefetch“ (Statistiken zur Nutzung durch Ressourcenhinweise für die Vorabrendering-Funktion)
  • „gws_NoStatePrefetch“ (Statistiken zur Nutzung durch die Google-Suchergebnisseite)
  • „omnibox_NoStatePrefetch“ (Statistiken zur Nutzung durch die Chrome-Adressleiste)