HTMLImageElement: fetchPriority Eigenschaft

Die fetchPriority Eigenschaft des HTMLImageElement-Interfaces repräsentiert einen Hinweis für den Browser, 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 es einem Entwickler, dem Browser mitzuteilen, dass das frühzeitige Herunterladen eines bestimmten Bildes für das Benutzererlebnis wichtiger oder weniger wichtig ist, als der Browser vernünftigerweise bei der Zuweisung einer internen Priorität ableiten kann. Dies ermöglicht es dem Browser, die Priorität zu erhöhen oder zu verringern und das Bild möglicherweise früher oder später zu laden, als es sonst der Fall wäre. Die Eigenschaft sollte sparsam verwendet werden, da übermäßige oder falsche Priorisierung die Leistung beeinträchtigen kann.

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

Bitte 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";