prefetch 与 preload 的区别是什么

在用Webpack打包工具生成html文件时，会有 prefetch 和 preload属性值。

<link rel="prefetch" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

preload

1. preload 告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源（加载当前路由必须资源，优先级高）；
2. 让浏览器提前加载指定资源，加载后并不执行，在需要执行的时候再执行。
   • 加载和执行分离开，可不阻塞渲染和 document 的 onload 事件；
   • 提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出来。

prefetch

1. prefetch 优先级低，是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。

preload 加载页面必需的资源如 CDN 上的字体文件，与 prefetch 预测加载下一屏数据，兴许是个不错的组合。

参考链接： 用 preload 预加载页面资源