HTMLLinkElement:fetchPriority 属性
Baseline 2024Newly available
Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
HTMLLinkElement
接口的 fetchPriority
属性为浏览器提供了一个提示,指示它应如何相对于同类型的其他资源来优先获取特定资源。它反映了对应 <link>
元素的 fetchpriority
属性。
该属性允许开发人员向浏览器发出信号,表明在加载过程中早期获取特定资源对用户体验的影响,这种影响可能比浏览器在分配内部优先级时能够合理推断出的影响更大或更小,特别是在预加载资源时。这反过来又使浏览器能够提高或降低优先级,并可能使资源比原本更早或更晚地加载。应谨慎使用该属性,因为过度或错误的优先级设置可能会降低性能。
获取优先级可用于补充预加载功能,允许开发人员提高某些资源的优先级,使其优先于默认以较高优先级预加载但影响较小的资源。例如,如果某张特定图片对网站的 LCP(最大内容绘制)有显著贡献,那么可以将其设置为预加载,并赋予高获取优先级。
请注意,任何获取操作的内部优先级以及 fetchPriority
对优先级的影响都完全取决于浏览器。
值
示例
const preloadLink = document.createElement("link");
preloadLink.href = "my-image.jpg";
preloadLink.rel = "preload";
preloadLink.as = "image";
preloadLink.fetchPriority = "high";
document.head.appendChild(preloadLink);
规范
Specification |
---|
HTML # dom-link-fetchpriority |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fetchPriority |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Uses a non-standard name.
- Has more compatibility info.
参见
HTMLImageElement.fetchPriority
HTMLScriptElement.fetchPriority
- HTTP
Link
标头 - 使用 Fetch Priority API 优化资源加载一文讲述了该 API 如何影响 Chrome 中的优先级。