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

Question

Preload 和 prefetch 都是用来提前请求资源的，这样以后的资源加载可以很快。看来我可以将两者互换

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

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

没有注意到任何区别。

他们有什么区别？

标签： htmlpreloadprefetch

Answer 1

预载

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

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

预取

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

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