Unterstützung für Vorabrendern und Vorabrufen

Verwenden Sie Vorabrendern und Vorabrufen in Internet Explorer 11, um die Websitenavigation zu verbessern. Vorabrendern Wird auch Vorabladen genannt und gibt ann, dass eine Webseite im Hintergrund geladen (gerendert) werden soll, während der Benutzer die aktuelle Seite liest. Vorabrufen identifiziert Ressourcen, die im Hintergrund heruntergeladen werden sollen. Da beide Features Inhalt herunterladen, bevor er benötigt wird, sind die Ressourcen bei Bedarf sofort verfügbar.

Hier erfahren Sie, wie Sie mithilfe von link-Elementen Webseiten vorabrendern und Ressourcen im Hintergrund vorabrufen.

Daten vorab bereitstellen und die Leistung verbessern

Während der Benutzer eine Webseite in IE11 liest, kann der Browser im Hintergrund weitere Daten laden und rendern. Als Webentwickler können Sie die Webseiten und Ressourcen identifizieren, die der Benutzer wahrscheinlich als Nächstes braucht. Dadurch verbessern Sie die gefühlte Leistung Ihrer Website, da der Inhalt bereitsteht und schneller angezeigt werden kann.

Stellen Sie sich vor, Sie haben einen Artikel geschrieben, der auf mehrere Webseiten aufgeteilt ist. Während der Benutzer eine Seite liest, können Sie jeweils die nächste Seite vorab laden, sodass sie angezeigt wird, sobald der Benutzer sie braucht. Falls Sie eine Website erstellt haben, die mehrere Artikel enthält, können Sie auch die Startseite dazu nutzen, Stylesheets, Bilder und andere Ressourcen, die auf jeder Seite verwendet werden, herunterzuladen, sodass die einzelnen Artikel schneller geladen werden.

Hierzu können Sie das link-Element verwenden. Ab IE11 werden für das rel-Attribut folgende Werte unterstützt:

WertBeschreibung und Beispiel
PreRender

Identifiziert eine Webseite, die im Hintergrund geladen werden soll, falls der Benutzer als nächstes zu ihr navigieren möchte.

Beispiel:


<link rel="prerender" href="http://example.com/nextpage.html" />

IE11 kann eine Seite im Hintergrund vorab rendern. Liegt eine zweite Anforderung für das Vorabrendern vor, wird die erste Anforderung ersetzt. Weitere Anforderungen für das Vorabrendern werden ignoriert.

prefetch

Identifiziert eine Ressourcendatei, die in den Zwischenspeicher heruntergeladen werden soll, etwa ein Bild oder ein CSS-Stylesheet.

Beispiel:


<link rel="prefetch" href="http://example.com/style.css" />

IE11 unterstützt bis zu zehn (10) Anforderungen für den Vorabruf. Weitere Anforderungen werden ignoriert.

dns-prefetch

Gibt eine DNS-Abfrage zur Auflösung im Hintergrund an, um Anforderungen zu beschleunigen.

Beispiel:


<link rel="dns-prefetch" href="http://example.com/"/>

 

Hinweis  Internet Explorer unterstützt auch die Werte "next" und "prev" für das rel-Attribut. Weitere Informationen finden Sie unter Bestimmen von Zielen für das Vorblättern.

Ziel-URLs müssen sich auf einzelne Dateinamen beziehen (relativ oder vollqualifiziert) beziehen. Platzhalter werden nicht unterstützt.

Effektives Laden von Ressourcen im Hintergrund

Wenn Sie eine Webseite mithilfe des link-Elements vorab laden, lädt und rendert IE11 die Seite im Hintergrund.

Das Laden einer Webseite im Hintergrund hat keine Verringerung ihrer Ladezeit zur Folge. Die Seite benötigt die gleiche Anzahl von Netzwerkanforderungen – ganz gleich, ob sie im Vordergrund oder im Hintergrund geladen wird.

Der Unterschied ergibt sich aus der Wahrnehmung des Benutzers. Da vorab gerenderte Seiten im Hintergrund geladen und gerendert werden, werden sie umgehend angezeigt, wenn der Benutzer auf den Link klickt. Der Benutzer sieht nicht, wie die Seite geladen wird, und hat somit den Eindruck, dass die Seite schneller angezeigt wird.

Bedingungen für das Vorab-Rendern:

  • Befindet sich der Benutzer in einem getakteten Netzwerk, hängt die Möglichkeit zum Vorabrendern von Webseiten von dem Datennutzungstarif für das zum Anzeigen der Seite verwendete Gerät ab.
  • Die Ziel-URL darf kein Datei-Download sein.
  • Die Ziel-URL verwendet als Protokoll entweder "http://" oder "https://".
  • Die Ziel-URL ist ein Dokument auf oberster Ebene; es kann sich also um kein iframe-Dokument handeln.
  • Maximal eine Webseite kann jeweils vorab gerendert werden.
  • Das Dokument mit dem link-Element wird angezeigt (also auf der Vordergrundregisterkarte geladen und nicht minimiert).

Unter folgenden Umständen können Seiten nicht vollständig im Hintergrund gerendert werden:

  • Die Zielseite löst eine Benutzeroberflächenänderung aus – beispielsweise ein alert-Feld, einen window.open-Aufruf oder eine Sicherheitsbenachrichtigung.
  • Die Zielseite spielt automatisch mithilfe des Elements video oder audio eine Audio- oder Videodatei ab.
  • Die Zielseite ändert travel log.
  • Das Fenster für die Entwicklertools (F12) ist geöffnet.

In diesen Fällen wird die Zielseite angehalten, solange sie im Hintergrund ist. Wenn der Benutzer die Zielseite auswählt, wird sie angezeigt und das Rendern da fortgesetzt, wo es angehalten wurde.

Vorab gerenderte Bilder werden dem Benutzer nicht immer angezeigt. Die folgenden Bedingungen führen dazu, dass vorab gerenderte Bilder aus dem Speicher entfernt und nicht angezeigt werden:

  • Der Benutzer öffnet die Zielseite nicht innerhalb von fünf Minuten.
  • Der Benutzer öffnet eine andere Seite.
  • Der Benutzer wechselt zu einer anderen Registerkarte oder Browserinstanz.
  • Ein JavaScript-Prozess fügt ein neues link-Element hinzu, das eine andere vorab gerenderte Webseite (oder Ressource) anfordert.
  • Beim Laden der Zielseite tritt ein Fehler auf – beispielsweise der HTTP-Fehlercode 500 (Serverfehler), 404 (Ressource nicht gefunden) oder ein ähnlicher Fehler (wie etwa Verbindungsprobleme).

Wenn eine vorab gerenderte Seite verworfen und später wieder angefordert wird, wird sie direkt von dem Server geladen, auf dem sie gespeichert ist. Befindet sich die Seite noch im Browsercache, lädt sie ggf. schneller. Dies ist jedoch nicht sicher.

Das Laden einer Seite im Hintergrund kann gewisse Nebenwirkungen haben. Insbesondere bei Aktivitäten, die während eines load-Ereignisses ausgeführt werden, tritt unter Umständen Folgendes auf:

  • Microsoft ActiveX Steuerelemente werden erst geladen, wenn der Benutzer die Seite anzeigt. Verwenden Sie die Eigenschaft readyState, um zu prüfen, ob die Objekte verfügbar sind, bevor Sie deren Existenz in JavaScript voraussetzen.

  • Bestimmte Animationen erscheinen nicht, wenn die Seite angezeigt wird. Dies ist dann wahrscheinlich darauf zurückzuführen, dass die Animationen bereits ausgeführt wurden, während die Seite im Hintergrund geladen wurde.

  • Timer geben möglicherweise unerwartete Ergebnisse zurück.

  • Cookies, Zwischenspeicherinhalte und Änderungen durch asynchrone Vorgänge (wie etwa IndexedDB und Webspeicher) bleiben erhalten.

Bestimmen Sie bei solchen oder ähnlichen Nebeneffekten mit der Seitensichtbarkeits-API, wann die Seite sichtbar ist. Animationen sollten beispielsweise verzögert werden, bis die Seite sichtbar ist. Weitere Informationen finden Sie unter Effektives Verwenden von Vorabrendern und Vorabrufen.

Spezifikation

HTML5, Abschnitt 4.12.5.9

 

 

Anzeigen:
© 2014 Microsoft