前言
最近在研究 vue-cli 3.0生成的工程，在构建后生成的 index.html里面发现了下面这种用法：
复制代码复制代码这就触到了本人的知识盲区了，本着扫盲的目的，研究了下 link 标签，发现这个小东西功能还是挺强大的，上面的就是为了实现预加载功能，懂点儿英文的，一看见preload 就大致知道了。
之前也有预加载技术，像 prefetch，subresource 等，关于这两者和 preload 的区别，这是另外的话题了， 感兴趣的可以自己搜一下，不想搜的，你只要知道这两个跟 preload 相比弱的一逼就行了，就是 prefetch 浏览器兼容性方面稍微好一点点，这三个也各有偏重和应用场景，就不详细介绍了，下面我们就详细展开preload 这块。
功能介绍：
preload 是一项新的 web 标准，旨在提高性能，让 FE 对加载的控制更加粒度化。它让开发者有自定义加载逻辑的能力，免受基于脚本的加载器所带来的性能损耗。
preload 一个基本的用法就是提前加载资源，尽管大多数基于标记语言的资源能被浏览器的预加载器（preloader）尽早发现，但不是所有的资源都是基于标记语言的，比如一些隐藏在 css 和 js 中的资源（字体，图片等），当浏览器发现页面需要这些资源时，重新走一遍加载执行渲染的过程，会降低用户体验，并且对页面的渲染 造成延迟；
Preloader 简介
HTML 解析器在创建 DOM 时如果碰上同步脚本（synchronous script)，解析器会停止创建 DOM，转而去执行脚本。所以，如果资源的获取只发生在解析器创建 DOM时，同步脚本的介入将使网络处于空置状态，尤其是对外部脚本资源来说，当然，页面内的脚本有时也会导致延迟。
预加载器（Preloader）的出现就是为了优化这个过程，预加载器通过分析浏览器对 HTML 文档的早期解析结果（这一阶段叫做“令牌化（tokenization）”），找到可能包含资源的标签（tag），并将这些资源的 URL 收集起来。令牌化阶段的输出将会送到真正的 HTML 解析器手中，而收集起来的资源 URLs 会和资源类型一起被送到读取器（fetcher）手中，读取器会根据这些资源对页面加载速度的影响进行有次序地加载。
预加载的好处：
- 让浏览器提前加载指定资源（这里预加载完成后并不执行），在需要执行的时候在执行，这样将加载和执行分开，可以不阻塞渲染和 window.onload事件。
- 提前预加载指定资源，特别是字体文件，不会再出现 font 字体在页面渲染出来后，才加载完毕，然后页面字体闪一下变成预期字体。
- 带有 onload 事件，可以自定义资源在预加载完毕后的回调函数。
涉及属性介绍：
|
属性名 |
取值范围 |
介绍 |
|
as |
script：js 脚本font：字体文件style：样式表audio：音频video： 视频document：将被嵌入到或 |