Firefox开发者工具Initiator列imageset与vendor-main.chunk含义及图片加载疑问

关于Firefox开发者工具Initiator字段说明 #

• imageset 确实代表浏览器通过<picture>、srcset原生适配规则主动选中并加载的正在使用的图片，你这里对应的webp资源就是当前实际渲染的资源，和你检查DOM得到的结果一致。
• vendor-main.chunk... 不是浏览器原生备选图片的发起标识，这个是你的React项目打包后的框架/业务代码文件，说明jpg资源的请求是你的业务代码主动触发的，不属于<picture>标签的原生行为。

关于备选图片为什么也被加载 #

正常情况下，只要浏览器支持webp格式，<picture>标签只会加载第一个匹配的source对应的资源，完全不会请求后续的备选jpg格式资源，你出现两个资源都返回200的情况，属于额外逻辑导致的异常情况，常见原因可按以下方向排查：

1. 项目其他位置有单独引用该jpg资源，比如CSS背景图、其他组件的图片引用、全局资源预加载逻辑等
2. 你代码中ImgItem绑定的动画逻辑animationImg1，有可能是动画库内部为了实现动效主动预加载了jpg资源
3. 存在React渲染时序问题：比如组件首次渲染时img1Webp变量还未赋值，导致先渲染了只有jpg资源的<picture>结构，浏览器先发起了jpg请求，后续img1Webp赋值完成后组件更新，浏览器又发起了webp请求，最终两个请求都完成就会出现双200的情况

排查方案 #

点击网络面板中jpg资源对应的*vendor-main.chunk...*发起者链接，开发者工具会直接跳转到触发请求的对应代码行，可快速定位到发起jpg请求的具体逻辑。

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