HTML中的预加载和预取有什么区别？

Question

preload

和

prefetch

都是用来提前请求资源，以便后期资源加载可以很快。看来我可以互换两者而不会注意到任何差异：

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

他们有什么区别？

Answer 1

预加载

<link rel="preload">

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

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

预取

<link rel="prefetch">

要求浏览器下载并缓存 后台资源（例如脚本或样式表）。这 下载的优先级较低，因此不会干扰 更重要的资源。当您知道自己需要它时，这会很有帮助 后续页面上的资源，并且您希望提前缓存它。

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

来源

Answer 2

Addy Osmani 写了一篇文章，详细介绍了这一点，但简短的版本是：

preload 是一种声明式获取，允许您强制浏览器 在不阻止文档加载的情况下发出资源请求 活动。

预取是向浏览器暗示可能需要资源，但是 代表们决定是否以及何时加载它是一个好主意 到浏览器。

Answer 3

如

这篇darreboost博文所示

下载资源并加载到浏览器中主要分为四个步骤：

1. 解析资源来源的DNS （如果有必要，即如果浏览器尚未这样做）。

2. 连接源站 （如果需要，即如果浏览器尚未连接）。

3. 获取资源 （如果有必要，即如果资源尚未在用户代理缓存中并且 仍然有效）。

4. 最后一个 - 根据资源的类型及其原因 已获取 – 其评估和使用。

为了让浏览器更高效地下载资源，我们可以指示如何 优化这些不同的步骤。

1. dns-prefetch：指示浏览器应该执行 在此之前解析给定域名（确定要联系的 IP） 域名用于下载资源。

2. preconnect：向浏览器指示它应该连接给定的 origin，在该域用于下载资源之前。预连接 涉及，如 – dns-prefetch、DNS 解析，还涉及 TCP 握手 和 TLS 协商（如果页面是安全的）。

3. prefetch：向浏览器表明它可以下载给定的资源， 即使在页面中没有检测到它。资源下载低 优先。

4. preload：告诉浏览器必须尽快下载给定的资源 尽可能，优先级高。

Answer 4

rel="preload" 在解析正文之前为 current 文档提前加载资源，可能会节省总体加载时间。 作为优先级较低的提示，

rel="prefetch

" 会缓存当前文档加载后next导航的资源。