html预加载和预取有什么区别？

Question

Preload和prefetch都是用来提前请求资源，以便后面的资源加载可以快速进行。看来我可以将两者互换

<link rel="preload" href="foo.js" as="script">

<link rel="prefetch" href="foo.js">

没有注意到任何区别。

他们有什么区别？

原文由 golopot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

预加载

<link rel="preload"> 告诉浏览器尽快下载和缓存资源（如脚本或样式表）。当您在加载页面几秒钟后需要该资源并且想要加快速度时，它会很有帮助。

下载资源后，浏览器不会对该资源执行任何操作。不执行脚本，不应用样式表。它只是被缓存 - 所以当其他东西需要它时，它可以立即使用。

预取

<link rel="prefetch"> 要求浏览器在后台下载和缓存资源（如脚本或样式表）。下载发生在低优先级，因此它不会干扰更重要的资源。当您知道您将在后续页面上需要该资源并且希望提前缓存它时，这会很有帮助。

下载资源后，浏览器不会对该资源执行任何操作。不执行脚本，不应用样式表。它只是被缓存 - 所以当其他东西需要它时，它可以立即使用。

资源

原文由 user12910330 发布，翻译遵循 CC BY-SA 4.0 许可协议