fetchpriority 是 HTML 中的一个属性，用于指示浏览器在加载资源时的优先级。这个属性可以帮助优化页面加载性能，确保重要的资源优先加载。
属性值
fetchpriority 属性可以取以下几个值：
high：指示浏览器应优先加载此资源。auto：默认值，浏览器根据资源类型和位置自动决定加载优先级。low：指示浏览器应延迟加载此资源，直到更重要的资源加载完毕。
使用场景
- 关键资源优先加载：对于重要的 CSS 文件、JavaScript 文件或图片，可以设置
fetchpriority="high"，确保它们优先加载。 - 非关键资源延迟加载：对于不那么重要的资源，如背景图片或次要的脚本，可以设置
fetchpriority="low"，以减少对关键资源加载的影响。
示例
关键资源优先加载
<link rel="stylesheet" href="critical.css" fetchpriority="high">
<script src="main.js" fetchpriority="high"></script>
<img src="important-image.jpg" alt="Important Image" fetchpriority="high">
非关键资源延迟加载
<img src="background-image.jpg" alt="Background Image" fetchpriority="low">
<script src="analytics.js" fetchpriority="low"></script>
注意事项
- 兼容性：
fetchpriority是一个相对较新的属性，不是所有浏览器都支持。在使用时，建议检查目标浏览器的支持情况。 - 合理使用：虽然
fetchpriority可以帮助优化加载性能，但过度使用高优先级可能会导致其他重要资源被延迟加载。因此，应根据实际情况合理设置优先级。
浏览器支持
截至 2023 年，fetchpriority 属性在现代浏览器中的支持情况如下：
- Chrome：支持
- Firefox：部分支持
- Safari：部分支持
- Edge：支持
兼容性
PS:学会了记得，点赞，评论，收藏，分享
