Preload和prefetch都用于预先请求资源，以便以后可以快速加载资源。看来我可以互换两者
<lightning:input aura:id="field
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
messageWhenRangeUnderflow="Select correct date range1"
max="2017-09-22"
messageWhenRangeOverflow="Select correct date range2"
onchange="{!c.checkValidity }"
</aura:component>
<link rel="preload" href="foo.js" as="script">
没有任何区别。
它们有什么区别？
答案 0 :(得分：10)
预加载
<link rel="preload">告诉浏览器下载并缓存一个 资源（如脚本或样式表）尽快。它的 加载后几秒钟内您需要该资源时会很有帮助 页，您想加快速度。下载后浏览器对资源不做任何事情 它。没有执行脚本，没有应用样式表。只是 已缓存-以便在其他需求时可用 立即。
预取
<link rel="prefetch">要求浏览器下载并缓存一个 资源（例如脚本或样式表）在后台。的 下载的优先级较低，因此不会干扰下载 更重要的资源。当您知道自己需要它时会很有帮助 资源在下一页上，并且您想提前对其进行缓存。下载后浏览器对资源不做任何事情 它。没有执行脚本，没有应用样式表。只是 已缓存-以便在其他需求时可用 立即。
答案 1 :(得分：4)
下载资源并加载到浏览器可以分为四个步骤：-
解析资源来源的DNS （如有必要，即如果浏览器尚未这样做）。
连接到源服务器 （如有必要，即如果浏览器尚未连接）。
获取资源 （如果有必要，即如果资源不在用户代理缓存中并且 仍然有效）。
最后一个——根据资源的类型和原因 被提取——它的评估和使用。
为了让浏览器更高效地下载资源，我们可以指出如何 优化这些不同的步骤。
dns-prefetch：向浏览器表明它应该执行 在此之前解析给定的域名（确定要联系的 IP） domain用于下载资源。
preconnect：向浏览器表明它应该连接给定的 origin，在该域用于下载资源之前。预连接 涉及，像 – dns-prefetch，DNS 解析，还有 TCP 握手 和 TLS 协商（如果页面是安全的）。
prefetch：向浏览器表明它可以下载给定的资源， 即使在页面中没有检测到它。资源下载低 优先。
preload：告诉浏览器它必须尽快下载给定的资源 尽可能高的优先级。
答案 2 :(得分：2)
rel =“ preload” 在正文被解析之前，为当前文档尽早加载资源，从而可能节省总体加载时间。 / p>
作为较低优先级的提示， rel =“ prefetch ”在当前文档被保存后，为 next 导航缓存资源。加载。
答案 3 :(得分：1)
艾迪·奥斯曼（Addy Osmani）为此写了an article that goes into the details，但简短的版本是：
preload是一种声明式提取，可让您强制浏览器执行以下操作： 在不阻止文档加载的情况下请求资源 事件。
Prefetch向浏览器提示可能需要资源，但是 代表们决定是否以及何时加载它是一个好主意 浏览器。
答案 4 :(得分：1)
Prefetch，Preload，Preconnect称为资源提示
Preload与Prefetch的不同之处在于，Preload的重点是为当前导航获取资源。 prefetch的重点是为下一次导航获取资源。
预载
preload是一个新的Web标准，它可以更好地控制如何获取特定资源以进行当前导航。这是子资源预取的更新版本，已于2016年1月弃用。此伪指令可以在元素中定义，例如。通常，最好预先加载最重要的资源，例如图像，CSS，JavaScript和字体文件。请勿将其与浏览器预加载混淆，在浏览器预加载中，仅预加载以HTML声明的资源。 preload指令实际上克服了这一限制，并允许预加载通过CSS和JavaScript初始化的资源，并定义何时应应用每种资源。
预取
prefetch是低优先级的资源提示，允许浏览器在后台（空闲时间）获取以后可能需要的资源，并将其存储在浏览器的缓存中。页面加载完成后，便开始下载其他资源，如果用户单击预取的链接，则会立即加载内容
预连接
我们要讨论的最后一个资源提示是预连接。 preconnect指令允许浏览器在将HTTP请求实际发送到服务器之前设置早期连接。这包括DNS查找，TLS协商，TCP握手。从而消除了往返延迟，并为用户节省了时间。