HTMLScriptElement: fetchPriority 属性

Baseline 2024
新推出

自 2024 年 10 月以来,此功能已可在最新的设备和浏览器版本上使用。此功能可能不适用于旧设备或浏览器。

HTMLScriptElement 接口的 fetchPriority 属性表示一个提示,用于指示浏览器如何相对于其他外部脚本来优先获取该外部脚本。它反映了 <script> 元素的 fetchpriority 属性。

该属性允许开发者指示,在加载过程中早期或晚期获取某个脚本对用户体验的影响,比浏览器在分配内部优先级时通常能够推断出的更为重要。这反过来又允许浏览器提高或降低优先级,并可能比平时更早或更晚地加载脚本。该属性应谨慎使用,因为过度或不正确的优先级设置会降低性能。

fetch 优先级允许您降低晚期 body 脚本的优先级,或者在不使用 preloading 的情况下提高 async 脚本的优先级。当脚本的早期加载很重要时,可以使用优先级来补充 preloading,将优先级提高到比默认优先级更高的、影响较小的资源之上。

请注意,任何获取操作的内部优先级以及 fetchPriority 对优先级的影响完全取决于浏览器。

一个表示优先级提示的字符串。可能的值为:

high

以高优先级相对于其他外部脚本获取外部脚本。

low

以低优先级相对于其他外部脚本获取外部脚本。

auto

不设置 fetch 优先级的偏好。这是默认值。如果没有设置值或设置了无效值,则使用此选项。

示例

html
<script id="el" type="module" src="main.js" fetchpriority="high"></script>
js
const el = document.getElementById("el");
console.log(el.fetchPriority); // Output: "high"

规范

规范
HTML
# dom-script-fetchpriority

浏览器兼容性

另见