＜link＞ 元素中 preload和 prefetch 的使用和区别

preload

preload 也被称为预加载，其用于 link 标签中，可以指明哪些资源是在页面加载完成后即刻需要的，浏览器会在主渲染机制介入前预先加载这些资源，并不阻塞页面的初步渲染

<link rel="preload" href="https://i.snssdk.com/slardar/sdk.js" as="script" />

preload 使用 as 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说，preload as=“style” 将会获得比 as=“script” 更高的优先级。

不带 as 属性的 preload 的优先级将会等同于异步请求

该资源一直会从磁盘缓存中读取，JS、CSS 及图片资源都有同样的表现，这主要还是和资源的渲染时机有关，在渲染机制还没有介入前的资源加载不会被内存缓存

prefetch

prefetch 则表示预提取，告诉浏览器加载下一页面可能会用到的资源，浏览器会利用空闲状态进行下载并将资源存储到缓存中

<link rel="prefetch" href="https://i.snssdk.com/slardar/sdk.js" />

使用 prefetch 加载的资源，刷新页面时大概率会从磁盘缓存中读取，如果跳转到使用它的页面，则直接会从磁盘中加载该资源

preload 和 prefetch 的区别

• preload 是告诉浏览器页面必定需要的资源，浏览器一定会预先加载这些资源
• prefetch 是告诉浏览器下一个页面可能需要的资源，浏览器不一定会加载这些资源
• 在VUE SSR生成的页面中，首页的资源均使用preload，而路由对应的资源，则使用prefetch
• 对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch