HTMLImageElement: fetchPriority-Eigenschaft

Die fetchPriority-Eigenschaft der HTMLImageElement-Schnittstelle stellt einen Hinweis für den Browser dar, wie er das Herunterladen eines bestimmten Bildes im Vergleich zu anderen Bildern priorisieren sollte. Sie spiegelt das fetchpriority-Attribut des entsprechenden <img>-Elements wider.

Die Eigenschaft ermöglicht einem Entwickler, dem Browser zu signalisieren, dass das frühe Herunterladen eines bestimmten Bildes im Ladeprozess mehr oder weniger Einfluss auf die Benutzererfahrung hat, als der Browser vernünftigerweise beim Zuweisen einer internen Priorität vermuten kann. Dadurch kann der Browser die Priorität erhöhen oder verringern und das Bild möglicherweise früher oder später als sonst laden. Diese Eigenschaft sollte sparsam verwendet werden, da übermäßige oder falsche Priorisierung die Leistung beeinträchtigen kann.

Die Fetch-Priorität kann verwendet werden, um das Preloading zu ergänzen, wodurch ein Entwickler die Priorität vor weniger wichtigen Ressourcen erhöhen kann, die eine höhere Standardpriorität haben. Wenn ein Entwickler beispielsweise weiß, dass ein bestimmtes Bild erheblich zum Largest Contentful Paint (LCP) der Website beiträgt, könnte er <link rel="preload"> für das Bild hinzufügen und dann die Priorität weiter mit der fetchpriority-Eigenschaft erhöhen.

Beachten Sie, dass sowohl die interne Priorität eines jeden Abrufvorgangs als auch der Einfluss von fetchPriority auf die Priorität vollständig vom Browser abhängen.

const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";