Resourse Hints 知多少
在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？
今天我们就来学习通过在 link 标签里加上特定的属性，比如 preload、prefetch 等来解决此类问题，那么你对这些属性又了解多少呢？把它们用在了你们的项目优化中了嘛？
preload
preload 提升了资源加载的优先级，使得它提前开始加载（预加载），在需要用的时候能够更快的使用上。另外 onload 事件必须等页面所有资源都加载完成才触发，而当给某个资源加上 preload 后，该资源将不会阻塞 onload。
preload 怎么用
当某个页面加载了 2 个脚本 jquery.min.js 和 main.js：
1 | <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> |
此时该页面的资源加载 Waterfall 长这样：
当在 <head> 里通过 <link> 标签给 main.js 配置 preload 预加载后：
1 | <link rel="preload" as="script" href="./main.js"> |
此时的 main.js 加载顺序出现在了 jquery.min.js 的前面，这就是 preload 提升资源加载优先级的效果。
当一直刷新浏览器的时候，偶然出现 Waterfall 并不能准确的显示资源加载的顺序，所以这个时候就需要比较每个资源被加入到下载队列的时间，比如如下的 main.js 由于用了 preload 预加载，所以 queue time 比较早。
通过 <link rel="preload"> 只是预加载了资源，但是资源加载完成后并不会执行，所以需要在想要执行的地方通过 <script> 来引入它：
1 | <script src="./main.js"></script> |
但是也有一个例外，因为 CSS 的加载也是通过 <link> 标签引入的，所以我们可以巧妙的利用这点，当 onload 事件触发的时候修改 rel 属性的值，使得它由原来的预加载样式变成引入样式：
1 | <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/> |
如果通过 preload 加载了资源，但是又没有使用它，则浏览器会报一个警告：
preload 除了能够预加载脚本之外，还可以通过 as 指定别的资源类型，比如：
style样式表；font：字体文件；image：图片文件；audio：音频文件；video：视频文件；document：文档。
preload 应用案例
preload 主要用于提升当前页面某些阻塞资源的下载优先级，使得页面能够尽快渲染显示出来。
案例一：预加载定义在 CSS 中资源的下载，比如自定义字体
当页面中使用了自定义字体的时候，就必须在 CSS 中引入该字体，而由于字体必须要等到浏览器下载完且解析该 CSS 文件的时候才开始下载，所以对应页面上该字体处可能会出现闪动的现象，为了避免这种现象的出现，就可以使用 preload 来提前加载字体，type 可以用来指定具体的字体类型，加载字体必须指定 crossorigin 属性，否则会导致字体被加载两次。
1 | <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2"> |
以上这种写法和指定 crossorigin="anonymous" 是等同的效果。
案例二：预加载 CSS 文件
在首屏加载优化中一直存在一种技术，叫做抽取关键 CSS，意思就是把页面中在视口中出现的样式抽出一个独立的...
剩余内容已隐藏