InstantClick ist eine ziemlich beliebte JavaScript-Bibliothek (4.344 Sterne, während ich tippe). Dies ist die Essenz
Bevor Besucher auf einen Link klicken, fahren sie mit der Maus über diesen Link. Zwischen diesen beiden Ereignissen vergehen normalerweise 200 ms bis 300 ms (testen Sie es selbst hier). InstantClick nutzt diese Zeit, um die Seite vorab zu laden, sodass die Seite bereits vorhanden ist, wenn Sie klicken.
Sie fahren mit der Maus über einen Link, dieser Ajax-ruft die Seite ab und rendert sie vorab. Beim Klicken ersetzt er den `<body>`- und `<title>`-Tag und ändert die URL.
Ich habe gerade davon gehört. Klingt ziemlich clever. Progressive Enhancement. Erhöhte wahrgenommene Leistung. Ich kann mir Bandbreitenbedenken als Einwand vorstellen. Das Herunterladen jeder Seite, über die ich mit der Maus fahre, scheint etwas bandbreitenhungrig zu sein.
Das hat mich aber zum Nachdenken gebracht... gibt es nicht ein neumodisches Prerendering-Ding? Ja, das gibt es
<link rel="prerender" href="(url)">Es ist eigentlich nicht *so* neumodisch. Steve Souders schrieb 2013 darüber
Das ist so, als würde man die URL in einem versteckten Tab öffnen – alle Ressourcen werden heruntergeladen, das DOM wird erstellt, die Seite wird gesetzt, die CSS wird angewendet, das JavaScript wird ausgeführt usw. Wenn der Benutzer zur angegebenen href navigiert, wird die versteckte Seite eingeblendet, sodass sie sofort zu laden scheint.
Can I Use zeigt anständige Unterstützung
Diese Browser-Supportdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 13 | Nein | 11 | 79 | Nein |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | Nein | Nein | Nein |
Bedeutet das nicht, dass wir etwas wie das hier tun könnten?
var links = document.querySelectorAll('a');
[].forEach.call(links, function(link) {
link.addEventListener("mouseenter", function() {
var newPreLoadLink = document.createElement("link");
newPreLoadLink.rel = "prerender";
newPreLoadLink.href = link.href;
document.head.appendChild(newPreLoadLink);
})
});Die Frage ist, ob dynamisch eingefügte Link-Elemente wie diese tatsächlich das Prerendering auslösen. Ich habe einen recht primitiven Test in Chrome durchgeführt und es schien nicht zu funktionieren. Na ja.
Wenn Sie noch prädiktiver als per Hover sein möchten, könnten Sie Premonish ausprobieren, „Eine Bibliothek zur Vorhersage, mit welchem Element ein Benutzer als Nächstes interagieren wird.“
Wenn Sie sich für solche Dinge interessieren, ist Prerendering nicht der einzige auf dem Markt. Robin hat letztes Jahr alles darüber geschrieben.
Einerseits fantastisch, weniger wahrgenommene Wartezeit. Andererseits... ich verbringe so viel Zeit in Gebieten mit begrenzter Bandbreite, das ist ein bisschen wie das automatische Abspielen von Videos, wenn es eingeschaltet ist, es tötet alles, während es versucht zu puffern oder abzuspielen.
Ich fände es in Ordnung, wenn der Browser automatischer wäre, hm, das dauert etwas/benötigt Ressourcen, wollen Sie...
LOL, und der Land- und Mobilfunkanbieter hat eine hohe Bandbreite und ein geringes Datenvolumen, um die Bandbreite zu reduzieren.
Ich habe die gleichen Bedenken. Meiner Meinung nach sollte der Browser entscheiden, wann er eine Seite vorlädt und wann er es besser nicht tun sollte. Wenn man sich in einem unterentwickelten Land wie Deutschland (bezüglich des Internets) befindet, könnte dies die Erfahrung leicht verschlimmern. Vielleicht sollte man in Erwägung ziehen, die Seite als Progressive Web App zu laden, damit der (Android-)Benutzer die Dinge nicht zweimal laden muss.
Aber wann immer Sie am Desktop sind und herausfinden können, wie schnell die Verbindung ist, kann diese Bibliothek ein Vorteil für den Benutzer sein.
Diese Funktion wäre ein echter Bandbreiten- und Systemressourcenfresser. Wenn ein Benutzer mit der Maus über einen Link fährt, aber letztendlich nicht darauf klickt, sind die für das Herunterladen der Seite aufgewendete Bandbreite und die für das Rendern aufgewendeten Ressourcen eine Verschwendung.
Ich sage das, weil ich in mehr als 60 % der Fälle mit der Maus über einen Link fahre und dann in der Statusleiste nachsehe, wohin der Link führt, bevor ich darauf klicke. Ich denke, viele andere Leute tun das auch.
Ich bin trotzdem froh, dass diese Funktion entwickelt wurde. Lob an den Entwickler. Er hat die Tür zu großartigen Möglichkeiten geöffnet, was getan werden kann, um sie zu verbessern. Selbst der Entwickler kann sie verbessern. Gut gemacht.
Ajaxing und das Ersetzen des Dokuments muss nicht per Hover erfolgen. Sie können dies per Klick tun, und es ist immer noch eine dramatische Beschleunigung für Nicht-SPA-Websites. Diese Technik wird normalerweise als „pjax“ bezeichnet. Ich habe eine winzige Bibliothek geschrieben, die dies automatisch tut, und verwende sie seit über einem Jahr in der Produktion. Vielleicht möchten Sie sie ausprobieren: https://github.com/Mitranim/simple-pjax
Ich habe letztes Jahr eine Rails-Gem für das Hinzufügen von Prerendering-Tags zu Ihren Seiten geschrieben. Habe auch einen ganzen Artikel darüber geschrieben! https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/
Wie immer sehr nützliche Tricks, danke fürs Teilen
Ich finde das eigentlich großartig. Es muss nur selektiv eingesetzt werden. Insbesondere Dinge, die sich auf den Conversion-Funnel beziehen, wie z. B. Checkout, Login, Signup, Wunschlisten und Landing Pages mit einem spezifischen Conversion-Ziel.
Das ist interessant, das wird tatsächlich in gewissem Maße von Browsern gemacht
Stellen Sie sich die Auswirkung dieses Ansatzes beim Scrollen auf einer Seite mit mehreren Links vor