gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 16:38:25 24 4
gpt4 key购买 nike

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

如果我使用 Firefox 进行调试,如何在 Firefox Developer Console 中确定资源是否已预加载?

最佳答案

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

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

<link> 的说明和一个 how to preload content有关更多信息,请访问 MDN。

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

话虽如此,预加载实际上在 Firefox 中不起作用(从版本 68 开始)。根据 bug 1222633它从 Firefox 56 开始实现,但有一些类似 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 文档的请求完成后立即看到对图像的请求。

关于preload - 如何判断浏览器开发者控制台中是否预加载了资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57433801/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com