Wenn auf einer Seite mehrere Netzwerkanfragen gleichzeitig ausgeführt werden, konkurrieren sie oft um dieselbe Bandbreite. Nicht kritische Daten wie Analysen, Logging oder Hintergrundsynchronisierung sollten depriorisiert werden, damit vom Nutzer initiierte oder kritische Datenabrufe schneller abgeschlossen werden können.
Implementierung
- Hintergrundanfragen identifizieren: Ermitteln Sie, welche
fetch()-Aufrufe für nicht wesentliche Daten bestimmt sind, die sich nicht auf die unmittelbare Nutzererfahrung auswirken. - Abrufpriorität anwenden: Fügen Sie dem Initialisierungsobjekt
fetch()die Optionpriority: 'low'hinzu.
Beispielcode
// Use high priority (default) for critical UI updates
const criticalData = await fetch('/api/data');
// Explicitly deprioritize background analytics
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify(eventData),
// Lower the priority to prevent network contention
priority: 'low'
});
Best Practices
- DO use
priority: 'low'for analytics, beacons, or telemetry data that isn't required for the current view. - DO: Verwenden Sie
priority: 'low', um Daten vorab abzurufen, die der Nutzer später möglicherweise benötigt. Achten Sie darauf, dass dadurch die Daten, die er jetzt benötigt, nicht verlangsamt werden. - Verwenden Sie
priority: 'low'NICHT für Abrufe, die für die Nutzerfreundlichkeit entscheidend sind. - Verwenden Sie NICHT den verworfenen Schlüssel
importanceim Objekt für die Abrufoptionen. Der richtige Schlüssel istpriority.
Fallback-Strategie
Die Option priority in der Fetch API ist eine progressive Verbesserung. Browser, die diese Option nicht unterstützen, ignorieren sie und behandeln die Anfrage mit der Standardpriorität. Für die grundlegende Verwendung ist keine explizite Featureerkennung oder Fallback-Logik erforderlich.