在img标签中同时使用fetchpriority="high"与loading="eager"是否可行？

1. Firefox对fetchpriority的支持情况 #

• 截至目前，Firefox不管是桌面端还是移动端版本，都不支持fetchpriority属性。在Firefox里用这个属性等于白加，浏览器会直接忽略它，完全不会按你指定的优先级去加载资源。

2. 同时用fetchpriority和预取类属性的运作逻辑及性能影响 #

这里默认你说的是和preload、prefetch这类预取属性搭配的情况，具体如下：

运作机制 #

• 搭配preload时：像Chrome、Edge这类支持fetchpriority的浏览器，会同时执行两个规则——先触发预加载请求，再按照fetchpriority指定的级别（high/low/auto）把这个请求放到网络队列的对应位置，优先或延后处理。不支持的浏览器（比如Firefox）就只认preload，优先级设置直接无视。
• 搭配prefetch时：prefetch本来就是用来预取未来可能用到的资源，默认优先级很低。要是给它加上fetchpriority="high"，支持的浏览器会提高这个预取请求的优先级，但这其实违背了prefetch的设计初衷——它本就是后台悄悄加载的低优先级资源。

性能问题 #

• 合理搭配反而能优化性能：比如给首屏必须的CSS、核心JS同时加上preload和fetchpriority="high"，能让浏览器更早、更优先加载这些资源，首屏速度会更快。
• 乱搭配就容易出问题：
  • 给非关键资源（比如某个非首屏的图片、次要JS）加fetchpriority="high"+preload，会抢占关键资源的网络带宽，反而拖慢首屏加载。
  • 给prefetch设高优先级，会提前耗掉网络资源去加载未来才用得到的东西，在低带宽环境下，当前页面的加载速度会明显受影响。

内容的提问来源于stack exchange，提问作者Sathik Basha