开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 27 天，点击查看活动详情
在线上环境中，会看到 Html 代码中有很多 link 标签引入 js 或 css 等资源文件
link 标签包含很多属性，其中 rel 是 relationship 的缩写，用于定义当前文档与被链接文档之间的关系。rel 属性的取值如下：
其中的 preload 和 prefetch 和页面加载优化有关，当加载页面时，如果没有设置 defer 或 async（异步），浏览器会立即执行资源和脚本
<link rel="preload" href=""><link rel="prefetch" href="">
在浏览器的 Network 请求中可以看到预加载的标记，经过预加载的资源，在使用时会从浏览器缓存获取：
prefetch 链接预取
链接预取是一种浏览器机制，利用浏览器空闲时间来下载或预取未来可能访问的文档
相关的细节，可参考文档 Link prefetching FAQ
preload 预加载
预先加载当前页面的资源，防止阻塞页面的渲染，提升页面的加载性能
写法
<link rel="preload" as="stylesheet" crossorigin="crossorigin" type="" href="...">
相关属性
- rel：preload prefetch 等
- href：指定需要被预加载资源的资源路径
- as：需要加载的资源类型（脚本： script，样式： stylesheet）
- type：可以包含该元素所指向资源的MIME类型
其中 as,
可预加载的内容：
区别
preload加载当前页面所需的资源，prefetch加载其它页面有可能用到的资源（加载的优先级相对较低）- 它们不会立即执行
- 当页面关闭时，preload 的资源会停止获取，prefetch 仍会继续
- 它们都不受同源限制
- 在 Vue 中，首页的资源使用 preload，而路由对应的其它页面的资源使用 prefetch
除此之外，webpack 插件 preload-webpack-plugin 可以实现预加载和预取
