Firefox-Developer-Tools - network tab - images - 'initiator‘列中的'imageset’和‘vendors main.chunk’是什么意思？

Question

我有一套webp和jpg文件作为不兼容浏览器的替代图像。

我是否正确理解了"Initiator“列中的"imageset”条目是指已加载的映像和"vendor-main.chunk...“指的是另一种形象？

我检查了DOM元素，它在当前源文件下显示webp图像正在正确加载。

两者的状态都是200。

即使浏览器使用webp图像，备用图像仍会被加载吗？

以下是来自DevTools的两个屏幕：

​

​

​

​

编辑1:下面是一些jsx (react)代码，用于选择适当的图像：

<ImgContainer>
<ImgItem animate={animationImg1}>
    <picture>
        // if the browser support webp images
        <source srcSet={img1Webp} type="image/webp" alt="Praxis Hauptraum" />

        // if the browser does not support webp images
        <source srcSet={img1Jpg} type="image/jpeg" alt="Praxis Hauptraum" />

        // Fallback if the browser does not support the picture tag
        <img src={img1Jpg} alt="Praxis Hauptraum" />
    </picture>
</ImgItem>
....

编辑2:显示网站上图像的屏幕截图：

​

​

编辑3：“实践”部分的Dom截图。此部分包含3张图片作为图片标签。

​

​

Answer 1

Initiator列中的"imageset“基本上是指从一组给定的图像中加载的图像，可以从HTML中定义的图像中选择。在您的例子中，这意味着通过<picture>元素中的<source srcSet="..." />。

该列中的"vendors~main.chunk.js“表示通过JavaScript调用加载的相关图像。对该图像的请求发生在该脚本的第25114行。

因此，这两个请求显然是彼此独立地发生的，并且由脚本引起的请求是多余的。

为了找出究竟是什么导致了对JPEG图像的请求，您需要单击调用堆栈中的最后一行(main.chunk.js:1:89)。这将切换到调试器，在调试器中您可以看到哪个语句是请求的来源。(您可能希望漂亮地打印该脚本。)

从这一行开始，您可以单步执行导致请求的函数调用。