江苏龙网

  1. 主页 > 生活百科 > >

如何通过使用优先级提示，来控制所有网页资源加载顺序( 二 )

网页

fetch("http://localhost:8000/pay", { method: "POST", body: paymentBody,});fetch("http://localhost:8000/log", { method: "POST", body: loggingBody,});

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
默认情况下，浏览器会自动将它们都视为 "高 "优先级：
如何通过使用优先级提示，来控制所有网页资源加载顺序

文章插图
现在，我们要明确地告诉浏览器每个请求的优先级：
fetch("http://localhost:8000/pay", { method: "POST", body: paymentBody,+ priority: "high"});fetch("http://localhost:8000/log", { method: "POST", body: loggingBody,+ priority: "low"});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
这次，优先级是不同的：
如何通过使用优先级提示，来控制所有网页资源加载顺序

文章插图
可能的担忧是"low"优先级的请求可能会丢失 - 如果用户过早离开页面，请求可能会被取消 。这是一个真正的问题 。根据几个因素，关闭标签页或转到下一个页面可能导致一个重要但相对低优先级的请求被中止 。
幸运的是 ， fetch() 还接受一个     keepalive 选项 。当设置为true时，即使页面终止，浏览器也会完成该请求 。
何时使用当你知道多个请求正在并发执行 ， 并且你明确知道哪个最重要（或哪个可以安全地被降级）时，指示fetch()的优先级 。
优先化<img />请求如果我们不做任何特殊处理 ， 浏览器会尽量确定页面上最重要的图像 。为了说明这一点，我加载了以下图像，它们之间的距离很大，所以只有一个会在"页面首部"显示 。
<img src=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"./cat-1.jpeg" />
如何通过使用优先级提示，来控制所有网页资源加载顺序
如何通过使用优先级提示，来控制所有网页资源加载顺序
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
浏览器发现了哪个最重要 ， 但这花了一秒钟 。当开始下载时，这三者都是“低”优先级 。但很快，页面首部的那个切换到了“高”优先级 。
如何通过使用优先级提示，来控制所有网页资源加载顺序

文章插图
当我为第一张图片添加fetchpriority属性时，情况变得更加可预测：
<img src=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"./cat-1.jpeg" fetchpriority="high" />
  • 1.
此后，cat-1.jpeg 从一开始就以最高的优先级加载 。虽然最初令人费解，但这是有道理的 。浏览器非常擅长确定资源的关键性 ， 但它从明确的指示中受益 。如果你知道一张图片很重要，就明确说明 。
顺便说一句，这个特性与本地图像延迟加载非常搭，这是现在非常受支持的特性 。
<img src=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"./cat-1.jpeg" fetchpriority="high"/>
如何通过使用优先级提示，来控制所有网页资源加载顺序
如何通过使用优先级提示，来控制所有网页资源加载顺序
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
有了这个，浏览器就知道如何加载图像，只在合适的时候加载 。在我的情况下，它甚至不会开始请求初始加载时屏幕外的图像 。相反，它会等到它们更接近视口 。
如何通过使用优先级提示，来控制所有网页资源加载顺序

文章插图
何时使用当你知道它们对页面体验非常重要时，对图像使用明确的fetchpriority 。主图像是一个很好的开始，它甚至可以影响页面的核心网络指标 - 特别是LCP（最大内容绘制） 。
优先化 <script /> 标签页面上带有src属性的任何普通<script />在获取时都会得到高优先级，但这有一个权衡：在它加载并执行之前 ， 它会阻止解析页面的其余部分 。出于这个原因，async属性很有用 。它会以低优先级在后台请求脚本 ， 并在准备好后立即执行 。知道这一点，以下设置行为是可预测的：
<script src=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"/script-async.js" async notallow="console.log('async')">


推荐阅读


上一篇：Redis 的主库挂了，如何不间断服务？

下一篇：Configuration源码，你了解多少？