你如何判断资源是否正在浏览器开发人员控制台中预加载

Question

我正在使用 <link rel="preload" ...> 技术来加快资源加载速度，但我没有看到对页面加载时间产生可衡量的影响。我不确定这是因为实际上没有预加载资源，还是出于其他原因。

如果我使用 Firefox 进行调试，我如何在 Firefox 开发者控制台中确定资源是否已预加载？

Answer 1

只有当 <link rel="preload" ...> 和资源的实际请求彼此 "far apart" 时，预加载资源才会产生可衡量的效果。例如。如果您想预加载 CSS 样式 sheet 但 <link rel="stylesheet" ...> 紧跟在 <link rel="preload" ...> 之后，您可能看不出有任何区别。当您想要预加载该样式sheet中的资源时，它可能会有所不同。

此外，您需要确保预加载的语法正确。为了预加载工作，除了 rel 之外，您还必须指定另外两个属性，href 来定义要预加载的源和 as 来指定资源类型。

有关详细信息，请参阅 MDN 上 <link> and the one for how to preload content 的描述。

要检查预加载是否对性能有任何影响，您应该查看 DevTools Network Monitor.

中加载资源的时间和顺序。

话虽如此，预加载实际上在 Firefox 中还不起作用（从版本 68 开始）。根据bug 1222633 it's implemented since Firefox 56, but there are some things like preloading resources marked with no-cache header，这仍然需要实施。检查 about:config 中的高级选项有一个首选项 network.preload，它控制预加载但默认设置为 false。此外，上述 MDN 页面提到此功能因某些问题而被禁用。

这里有一个简单的测试，用于预加载是否在您的浏览器中工作：

<!DOCTYPE html>
<html>
    <head>
        <link rel="preload" href="image.jpg" as="image" type="image/jpeg"/>
        <script>
        for (var i=0; i < 10000000000; i++) {
            var x = i;
        }
        window.addEventListener("DOMContentLoaded",
            e => document.body.style.backgroundImage = 'url(image.jpg)'
        );
        </script>
    </head>
    <body>
    </body>
</html>

如果支持预加载，图像请求应该在 JavaScript 执行之前进行，即您应该在 HTML 文档请求之后立即看到图像请求完毕。

你如何判断资源是否正在浏览器开发人员控制台中预加载

how do you tell if resources are being preloaded in browser developer console

preload

firefox-developer-tools