Prefetching, Pre-Rendering und Service Worker-Precaching

In den letzten Modulen haben Sie Konzepte wie das Verschieben Laden von JavaScript und Lazy Loading von Bildern und <iframe>-Elementen Durch das nachträgliche Laden von Ressourcen wird die Netzwerk- und CPU-Nutzung während der ersten durch Herunterladen von Ressourcen in dem Punkt, an dem sie benötigt werden, anstatt sie im Vorfeld zu laden, wo sie möglicherweise ungenutzt bleiben. Dadurch können die anfänglichen Seitenladezeiten verkürzt werden, bei nachfolgenden Interaktionen können jedoch eine Verzögerung, wenn die für den Betrieb benötigten Ressourcen noch nicht geladen sind sie auftreten.

Enthält eine Seite beispielsweise eine benutzerdefinierte Datumsauswahl, können Sie das Datum zur Auswahl, bis der Nutzer mit dem Element interagiert. Beim Laden bei Bedarf zu einer leichten Verzögerung führen, je nach Netzwerkverbindung, Gerätefunktionen oder bis die Ressourcen heruntergeladen, geparst und zur Ausführung verfügbar sind.

Das ist eine knifflige Balance. Sie wollen keine Bandbreite verschwenden, indem Sie Ressourcen, die ungenutzt bleiben, aber Interaktionen und die darauffolgende Seite verzögern sind vielleicht auch nicht ideal. Zum Glück gibt es eine Reihe von Tools, um eine bessere Balance zwischen diesen beiden Extremen zu finden – und dieses Modul behandelt einige Techniken, mit denen Sie dorthin gelangen, wie z. B. das Vorabrufen von Ressourcen, das Pre-Rendering ganzer Seiten und das Pre-Caching von Ressourcen mithilfe eines Service Workers.

Demnächst benötigte Ressourcen mit niedriger Priorität vorabrufen

Sie können Ressourcen wie Bilder, Stylesheets oder andere Elemente vorab abrufen. oder JavaScript-Ressourcen enthalten, indem Sie den Ressourcenhinweis <link rel="prefetch"> verwenden. Die Der prefetch-Hinweis informiert den Browser, dass eine Ressource wahrscheinlich in in naher Zukunft.

Wenn ein prefetch-Hinweis angegeben ist, kann der Browser eine Anfrage initiieren. für diese Ressource mit der niedrigsten Priorität, um einen Wettbewerb mit Ressourcen zu vermeiden die für die aktuelle Seite erforderlich sind.

<ph type="x-smartling-placeholder">

Der Vorabruf von Ressourcen kann die Nutzererfahrung verbessern, da der Nutzer auf den Download von Ressourcen warten, die in naher Zukunft benötigt werden, können sie bei Bedarf sofort aus dem Festplatten-Cache abgerufen werden.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

Das vorherige HTML-Snippet informiert den Browser darüber, dass er einen Prefetch date-picker.js und date-picker.css bei Inaktivität. Es ist auch möglich, Sie können Ressourcen dynamisch vorab abrufen, wenn der Nutzer mit der Seite in JavaScript

prefetch wird von allen modernen Browsern unterstützt, außer Safari. hinter einer Flagge verfügbar. Wenn Sie unbedingt vorab laden möchten, für Ihre Website so gestalten, dass sie in allen Browsern funktioniert – und Sie einem Service Worker. Lesen Sie dann weiter unten in diesem Modul über das Precaching mithilfe eines Service Workers erstellen

Seiten vorabrufen, um zukünftige Navigationen zu beschleunigen

Es ist auch möglich, eine Seite und alle ihre Unterressourcen vorab abzurufen, indem Sie die Methode as="document"-Attribut, wenn sie auf ein HTML-Dokument verweisen:

<link rel="prefetch" href="/page" as="document">

Wenn der Browser inaktiv ist, wird möglicherweise eine Anfrage mit niedriger Priorität für /page initiiert.

<ph type="x-smartling-placeholder">

In Chromium-basierten Browsern können Sie Dokumente mithilfe der Funktion Speculation Rules API. Die Spekulationsregeln sind als JSON-Objekt definiert entweder im HTML-Code der Seite enthalten oder über JavaScript dynamisch hinzugefügt werden:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

Das JSON-Objekt beschreibt eine oder mehrere Aktionen und unterstützt derzeit nur prefetch und prerender sowie eine Liste der URLs, die mit dieser Aktion verknüpft sind. In dem vorherigen HTML-Snippet hinzugefügt haben, wird der Browser angewiesen, /page-a vorab abzurufen. und /page-b. Ähnlich wie bei <link rel="prefetch"> sind Spekulationsregeln ein , die vom Browser unter bestimmten Umständen ignoriert werden.

<ph type="x-smartling-placeholder">

Bibliotheken wie Quicklink verbessern die Seitennavigation dynamisch, das Vorabrufen oder Pre-Rendering von Links zu Seiten, sobald diese im Darstellungsbereich des Nutzers. Dies erhöht die Wahrscheinlichkeit, dass die Nutzenden navigiert zu dieser Seite – im Vergleich zum Vorabruf aller Links auf der Seite.

<ph type="x-smartling-placeholder">

Seiten vorab rendern

Neben dem Vorabruf von Ressourcen ist es auch möglich, dem Browser einen Hinweis Mit diesem Modus wird eine Seite vorab gerendert, bevor der Nutzer sie aufruft. Dies kann beinahe da die Seite und ihre Ressourcen im Hintergrund. Sobald die Nutzenden die Seite aufgerufen haben, im Vordergrund.

Pre-Rendering wird über die Speculation Rules API unterstützt:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

Prefetch- und Pre-Rendering-Demos

Service Worker-Precaching

Es ist auch möglich, Ressourcen mithilfe eines Service Workers spekulativ vorab abzurufen. Durch das Service Worker-Precach können Ressourcen mithilfe der Cache API abgerufen und gespeichert werden. sodass der Browser die Anfrage mit der Cache API bearbeiten kann, Netzwerk. Beim Precaching für Service Worker wird ein sehr effektiver Service Worker verwendet. Caching-Strategie, die als Nur-Cache-Strategie bezeichnet wird. Dieses Muster ist stark denn sobald Ressourcen im Service Worker-Cache platziert sind, werden auf Anfrage nahezu sofort abgerufen.

<ph type="x-smartling-placeholder">
</ph> Zeigt den Service Worker-Caching-Ablauf von der Seite über den Service Worker bis zum Cache. <ph type="x-smartling-placeholder">
</ph> Bei der Nur-Cache-Strategie werden nur zulässige Ressourcen aus dem während der Installation durch den Service Worker. Nach der Installation werden im Cache Ressourcen nur aus dem Service Worker-Cache abgerufen.
<ph type="x-smartling-placeholder">

Sie können Workbox verwenden, um Ressourcen mithilfe eines Service Workers vorab im Cache zu speichern. Wenn Sie bevorzugen. Sie können jedoch Ihren eigenen Code schreiben, um einen vordefinierten Satz von Dateien. In jedem Fall entscheiden Sie sich für die Verwendung eines Service Workers zur Vorabspeicherung. Das Precaching erfolgt, wenn der Dienst Worker installiert ist. Nach der Installation werden die vorab im Cache gespeicherten Ressourcen können auf jeder Seite Ihrer Website abgerufen werden, die der Service Worker verwaltet.

<ph type="x-smartling-placeholder">

Workbox verwendet ein Precache-Manifest, um zu bestimmen, welche Ressourcen vorab im Cache gespeichert. Ein Precache-Manifest ist eine Liste von Dateien und Versionsinformationen die als „Informationsquelle“ damit die Ressourcen vorab im Cache gespeichert werden.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

Der vorherige Code ist ein Beispielmanifest, das zwei Dateien enthält: script.ffaa4455.js und /index.html. Wenn eine Ressource Version enthält Informationen in der Datei selbst (als Datei-Hash bezeichnet), dann gibt der revision kann als null beibehalten werden, da die Datei bereits versioniert ist (z. B. ffaa4455 für die Ressource script.ffaa4455.js im vorherigen Code). Für nicht versionierte Ressourcen haben, kann bei der Build-Erstellung eine Überarbeitung für sie generiert werden.

Nach der Einrichtung können mit einem Service Worker statische Seiten oder untergeordneten Ressourcen, um nachfolgende Seitennavigationen zu beschleunigen.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Auf einer E-Commerce-Produkteintragsseite kann beispielsweise ein Service Worker um den CSS- und JavaScript-Code, der zum Rendern der Produktdetailseite erforderlich ist, vorab im Cache zu speichern. Dadurch erscheint die Seite mit den Produktdetails viel schneller. Im im vorherigen Beispiel sind product-page.ac29.css und product-page.39a1.js vorab im Cache gespeichert. Die precacheAndRoute-Methode, die in workbox-precaching verfügbar ist die Handler, die erforderlich sind, um die vorab im Cache gespeicherten Ressourcen sicherzustellen, werden automatisch registriert. werden bei Bedarf von der Service Worker API abgerufen.

Da Service Worker weitgehend unterstützt werden, können Sie Service Worker verwenden Precieren in jedem modernen Browser, der je nach Situation erforderlich ist.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

Wissen testen

Bei welcher Priorität tritt ein prefetch-Hinweis auf?

Mittel.
und wenig Stress
Hoch.

Was ist der Unterschied zwischen Prefetch und eine Seite vorab rendern?

Sie sind weitgehend identisch. Nur ein Pre-Rendering erhält alle untergeordneten Ressourcen, während dies beim Prefetch nicht der Fall ist.
Zwar erhält sowohl ein Prefetch als auch ein Pre-Rendering für eine Seite eine Seite und alle ruft ein Prefetch nur die Seite und alle zugehörigen während das Pre-Rendering noch einen Schritt weiter geht, indem das bis die Nutzenden sie aufrufen.

Der Service Worker-Cache und der HTTP-Cache sind identisch.

Falsch
Richtig

Nächster Schritt: Überblick über Web Worker

Sie wissen nun, wie das Pre-Fetching, Pre-Rendering und Service Worker-Precaching mit kann nützlich sein, wenn es darum geht, die Navigation in der Zukunft zu beschleunigen. können Sie fundierte Entscheidungen darüber treffen, für Ihre Website und die Nutzenden.

Als Nächstes erhalten Sie einen Überblick über Web Worker und erfahren, wie diese mit hohen Kosten außerhalb des Hauptthreads arbeiten und ihm mehr Raum für Nutzerinteraktionen. Haben Sie sich schon einmal gefragt, wie Sie Wenn Sie mehr Raum für ein Gespräch haben, sollten Sie sich die nächsten beiden Module ansehen.