html preload 和 prefetch 有什么区别？

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 是一种声明性提取，允许您强制浏览器请求资源而不阻塞文档的 onload 事件。

预取是对浏览器可能需要资源的提示，但将决定是否以及何时加载它是一个好主意的决定权委托给浏览器。

Answer 3

Prefetch , Preload , Preconnect 被称为资源提示

Preload 与 Prefetch 的不同之处在于它专注于为当前导航获取资源。prefetch 专注于为下一个导航获取资源。

预载

preload 是一种新的 Web 标准，它可以更好地控制如何为当前导航获取特定资源。这是子资源预取的更新版本，已于 2016 年 1 月弃用。此指令可以在元素中定义，例如 . 通常，最好预加载最重要的资源，例如图像、CSS、JavaScript 和字体文件。preload 指令实际上克服了这个限制，并允许预加载通过 CSS 和 JavaScript 启动的资源，并定义何时应用每个资源。

预取

prefetch 是一个低优先级的资源提示，它允许浏览器在后台（空闲时间）获取稍后可能需要的资源，并将它们存储在浏览器的缓存中。页面加载完成后，它会开始下载其他资源，如果用户然后单击预取链接，它将立即加载内容

预连接

我们要讨论的最后一个资源提示是预连接。preconnect 指令允许浏览器在 HTTP 请求实际发送到服务器之前设置早期连接。这包括 DNS 查找、TLS 协商、TCP 握手。这反过来又消除了往返延迟并为用户节省了时间。

欲了解更多信息：https : //www.keycdn.com/blog/resource-hints

Answer 4

rel="preload"在解析正文之前提前加载当前文档的资源，从而可能节省总体加载时间。

作为优先级较低的提示，rel="prefetch " 会在当前文档加载后缓存资源以供下一次导航使用。

Answer 5

下载资源并加载到浏览器中可以分为四个步骤：-

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

2. 连接到源服务器（如有必要，即如果浏览器尚未连接）。

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

4. 最后——根据资源的类型和获取它的原因——它的评估和使用。

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

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

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

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

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