firefox-developer-tools - Firefox-Developer-Tools - 网络选项卡 - 图像 - 'initiator' 列中的 'imageset' 和 'vendors-main.chunk' 是什么意思

Question

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

我是否正确理解在“Initiator”列中，条目“imageset”表示加载的图像，“vendor-main.chunk...”表示替代图像？

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

两者的状态均为 200。

即使浏览器使用 webp 图像，是否仍会加载替代图像？

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

编辑1：这是一些用于选择适当图像的jsx（反应）代码：

<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 张图片作为图片标签。

标签： firefox-developer-tools

Answer 1

Initiator列中的“imageset”基本上是指从给定图像集加载的图像，以从 HTML 中定义的图像中进行选择。在您的情况下，这意味着通过<source srcSet="..." />您的<picture>元素。

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

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

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