Fetch Priority API 提高 LCP (页面最大元素绘制)性能

50 阅读1分钟

有人了解过 Fetch Priority API 吗,它在近几个版本的 Chrome 中可用了,简单说就是用来提高 LCP (页面最大元素绘制)性能的一个东西,给你的元素属性对应的优先级后,浏览器会尽可能按你设置的优先级请求该资源,以便它们尽早加载,适用于这些场景:

1、指定页面中最重要的资源的优先级,要它们尽早加载;
2、指定页面中可能需要立即使用的资源的优先级,例如 CSS 动画或 JavaScript 库;
3、指定页面中可能需要在页面加载之前加载的资源,例如图片或视频。

最简用法 <img src="xxx.png" fetchpriority="high" /> or <img src="xxx.png" fetchpriority="low" />

有人会问它和 preload 的区别在哪,区别就在 preload 是用来指定资源应该在页面加载之前预加载,Fetch Priority 是用来明确资源加载优先级;

另外,这个 API 并非性能优化的银弹,简单想,下载速率是不变的,提高某个资源的下载速度通常会以降低另一个资源的下载速度为代价,因此谨慎使用它,但还是建议有机会可以尝试看一下是否能减少 LCP 时间

最后附上我自己的测试结果,只能说有用但不多~

bmltYV8zMjQ3MDIzMDMwM18xNjkzMzA1ODUyNjc4XzcyNDI0NWU0LThkZDAtNDFjOS1iNGNlLWY2ODE2MWM3MzRhZA==.png