时间戳

首页 > 解决方案 > 您如何判断资源是否已在浏览器开发者控制台中预加载

preload - 您如何判断资源是否已在浏览器开发者控制台中预加载

问题描述

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

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

标签： preloadfirefox-developer-tools

解决方案

<link rel="preload" ...>仅当资源的请求和资源的实际请求彼此“相距甚远”时，预加载资源才会产生可衡量的效果。例如，如果您想预加载一个 CSS 样式表，但在<link rel="stylesheet" ...>之后有右边<link rel="preload" ...>，您可能不会看到任何区别。当您要预加载该样式表中的资源时，可能会有所不同。

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

有关如何在 MDN 上预加载内容的说明，请参阅说明<link>和说明，以获取更多信息。

要检查预加载是否对性能有任何影响，您应该查看DevTools Network Monitor中加载资源的时间和顺序。

话虽如此，预加载实际上还不能在 Firefox 中工作（从 68 版开始）。根据bug 1222633，它是从 Firefox 56 开始实现的，但是有些东西，比如预加载标有no-cacheheader的资源，仍然需要实现。检查高级选项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 文档的请求完成后立即看到对图像的请求。

推荐阅读