HTMLImageElement: fetchPriority 属性
HTMLImageElement 接口的 fetchPriority 属性表示一个向浏览器发出的提示,指示浏览器应如何相对于其他图片来优先获取该图片。它反映了相应 <img> 元素的 fetchpriority 属性。
该属性允许开发者发出信号,表明在加载过程早期获取某个图片对用户体验的影响比浏览器在分配内部优先级时可以合理推断出的要大或小。这反过来又允许浏览器增加或减少优先级,并可能比平时更早或更晚地加载图片。该属性应谨慎使用,因为过度或不正确的优先级设置会降低性能。
fetchPriority 可用于补充 预加载,允许开发者提高某个图片相对于默认优先级较高的、影响较小的资源的优先级。例如,如果开发者知道某个图片对网站的 最大内容绘制 (LCP) 有显著贡献,他们可以为该图片添加 <link rel="preload">,然后使用 fetchPriority 属性进一步提高其优先级。
请注意,任何获取操作的内部优先级以及 fetchPriority 对优先级的影响完全取决于浏览器。
值
一个表示优先级提示的字符串。可能的值为:
示例
js
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";
规范
| 规范 |
|---|
| HTML # dom-img-fetchpriority |
浏览器兼容性
加载中…
另见
HTMLLinkElement.fetchPriorityHTMLScriptElement.fetchPriority- HTTP
Link标头 - 使用 Fetch Priority API 优化资源加载,了解此 API 如何影响 Chrome 上的优先级。