<link>标签实现预加载功能详解

前言

最近在研究 vue-cli 3.0生成的工程，在构建后生成的 index.html里面发现了下面这种用法：

<link as=style href=/css/app.f60416c7.css rel=preload>复制代码

<link as=script href=/js/app.69189fdd.js rel=preload>复制代码

这就触到了本人的知识盲区了，本着扫盲的目的，研究了下 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）手中，读取器会根据这些资源对页面加载速度的影响进行有次序地加载。

预加载的好处：

1. 让浏览器提前加载指定资源（这里预加载完成后并不执行），在需要执行的时候在执行，这样将加载和执行分开，可以不阻塞渲染和 window.onload事件。

1. 提前预加载指定资源，特别是字体文件，不会再出现 font 字体在页面渲染出来后，才加载完毕，然后页面字体闪一下变成预期字体。

1. 带有 onload 事件，可以自定义资源在预加载完毕后的回调函数。

涉及属性介绍：

属性名	取值范围	介绍
as	script：js 脚本font：字体文件style：样式表audio：音频video： 视频document：将被嵌入到<frame>或<iframe>元素内部的页面image： 图片fetch：将要通过 fetch 和 XHR 请求获取的资源比如jsonobject： 将被嵌入到<embed >元素内的文件worker：js 的 web worker 或 share worker	该属性仅在 link 元素设置了rel=preload 是才能使用。规定了 link 元素要预加载的资源的类型，其取值范围也限制了哪些资源才可被预加载。设置了此属性使浏览器能够：1，更精确地优化资源加载优先级。2，匹配未来的加载需求，在适当的情况下，重复利用同一资源。3，为资源应用正确的内容安全策略。4，为资源设置正确的 Accept 请求头。
href	<url>	指定要加载资源的 URL，可以使绝对地址也可以是相对地址
rel	preload（当前功能相关）