Angesichts eines JSON-API-Endpunkts /api/config versuchen wir, <link rel="prefetch" href="/api/config"> im Kopf eines HTML-Dokuments zu verwenden. Chrome lädt die Daten erwartungsgemäß herunter, wenn es das Link-Tag im HTML-Code trifft, fordert es jedoch etwa eine Sekunde später erneut über XHR aus unserem Skript an.
Der Server ist so konfiguriert, dass er das Zwischenspeichern erlaubt und antwortet mit Cache-Control: "max-age=3600, must-revalidate" im Header. Wenn Chrome die Daten erneut anfordert, antwortet der Server korrekt mit dem Status 304 Nicht geändert.
Der Anwendungsfall ist folgender: Der Konfigurationsendpunkt wird immer aus dem Javascript in unserer einseitigen Anwendung mit XHR angefordert (eine AngularJS-Lösung, falls relevant). Unsere Skripte sind jedoch sehr groß und benötigen lange Zeit, um zu analysieren. Daher wird die JSON-Konfiguration erst angefordert, wenn die Analyse abgeschlossen ist. Mit dem Prefetching können wir einen Teil dieser Analysezeit verwenden, um Antworten von API-Endpunkten abzurufen und zu cachen, die andernfalls auf das Laden der Skripts warten müssten.
Von MDN :
Link prefetching ist ein Browser-Mechanismus, der Browser-Idle verwendet Zeit zum Herunterladen oder Vorablesen von Dokumenten, die der Benutzer möglicherweise besucht die nahe Zukunft.
IMO, Prefetching Daten für den Benutzer, bevor er es in seiner zukünftigen Navigation benötigt, ist ziemlich ähnlich zum Prefetch eines Bildes, bevor er zu ihm navigiert.
Ein anderer Ansatz kann mit dem Mitarbeiter gemacht werden, der Daten in einem parallelen Thread abruft .
Ja, Sie sollten JSON hier vorlesen können .
fetch: Ressource, auf die durch eine Abruf- oder XHR-Anforderung zugegriffen werden soll, z. B. eine ArrayBuffer- oder JSON-Datei.
Versuchen Sie also diese Syntax:
%Vor%Tags und Links javascript html google-chrome browser-cache prefetch