Priority Hints

可以手动标记加载资源的优先级

支持的标签

<img fetchpriority="high" />
<picture fetchpriority="low" />
<iframe fetchpriority="auto" />
<link />
<script />

 

一种典型场景（轮播 Carousel）

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

　　

其它的标记方式

// fetch
fetch('/api/articles.json', { priority: 'high' }).then(/*...*/)

// Http Header
Link: </app/style.css>; fetchpriority=high
Link: </app/script.js>; fetchpriority=low

// dynamically added to the document
没找到示例

 

其它问题？

跟 async，defer 这一类影响请求顺序的attribute是如何配合工作的

 

相关文档

https://wicg.github.io/priority-hints/#effects-of-priority-hints

https://datatracker.ietf.org/doc/html/rfc5988#page-4

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Link