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.
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.
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.
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>
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">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?
Was ist der Unterschied zwischen Prefetch und eine Seite vorab rendern?
Der Service Worker-Cache und der HTTP-Cache sind identisch.
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.