用 preload 预加载页面资源

妖狐艹你老母 2023-07-03 03:16 18阅读 0赞

> 作者：felix
> 
> https://github.com/ProtoTeam/blog/blob/master/201802/1.md

本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。

preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是

*  将加载和执行分离开，可不阻塞渲染和 document 的 onload 事件
 *  提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出

## 如何使用 preload ##

### 使用 link 标签创建 ###

<link rel="preload" href="/path/to/style.css" as="style">
    
    <script>
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'style';
    link.href = '/path/to/style.css';
    document.head.appendChild(link);
    </script>

### 使用 HTTP 响应头的 Link 字段创建 ###

Link: <https://example.com/other/styles.css>; rel=preload; as=style

如我们常用到的 antd 会依赖一个 CDN 上的 font.js 字体文件，我们可以设置为提前加载，以及有一些模块虽然是按需异步加载，但在某些场景下知道其必定会加载的，则可以设置 preload 进行预加载，如：

## 如何判断浏览器是否支持 preload ##

目前我们支持的浏览器主要为高版本 Chrome，所以可放心使用 preload 技术。其他环境在 caniuse.com 上查到的支持情况如下：

![format_png][]

在不支持 preload 的浏览器环境中，会忽略对应的 link 标签，而若需要做特征检测的话，则：

const isPreloadSupported = () => {
      const link = document.createElement('link');
      const relList = link.relList;
      if (!relList || !relList.supports) {
        return false;
      }
      return relList.supports('preload');
    };

## 如何区分 preload 和 prefetch ##

*  preload   是告诉浏览器页面**必定**需要的资源，浏览器**一定会**加载这些资源；
 *  prefetch 是告诉浏览器页面**可能**需要的资源，浏览器**不一定会**加载这些资源。

preload 是确认会加载指定资源，如在我们的场景中，x-report.js 初始化后一定会加载 PcCommon.js 和 TabsPc.js, 则可以预先 preload 这些资源；

prefetch 是预测会加载指定资源，如在我们的场景中，我们在页面加载后会初始化首屏组件，当用户滚动页面时，会拉取第二屏的组件，若能预测用户行为，则可以 prefetch 下一屏的组件。

## preload 将提升资源加载的优先级 ##

使用 preload 前，在遇到资源依赖时进行加载：![format_png 1][]使用 preload 后，不管资源是否使用都将提前加载：![format_png 2][]可以看到，preload 的资源加载顺序将被提前：![format_png 3][]

## 避免滥用 preload ##

使用 preload 后，Chrome 会有一个警告：![format_png 4][]

如上文所言，若不确定资源是必定会加载的，则不要错误使用 preload，以免本末倒置，给页面带来更沉重的负担。

当然，可以在 PC 中使用 preload 来刷新资源的缓存，但在移动端则需要特别慎重，因为可能会浪费用户的带宽。

## 避免混用 preload 和 prefetch ##

preload 和 prefetch 混用的话，并不会复用资源，而是会重复加载。

使用 preload 和 prefetch 的逻辑可能不是写到一起，但一旦发生对用一资源 preload 或 prefetch 的话，会带来双倍的网络请求，这点通过 Chrome 控制台的网络面板就能甄别：![format_png 5][]

## 避免错用 preload 加载跨域资源 ##

若 css 中有应用于已渲染到 DOM 树的元素的选择器，且设置了 @font-face 规则时，会触发字体文件的加载。而字体文件加载中时，DOM 中的这些元素，是处于不可见的状态。对已知必加载的 font 文件进行预加载，除了有性能提升外，更有体验优化的效果。

在我们的场景中，已知 antd.css 会依赖 font 文件，所以我们可以对这个字体文件进行 preload:

然而我发现这个文件加载了两次：![format_png 6][]![format_png 7][]![format_png 8][]

原因是对跨域的文件进行 preload 的时候，我们必须加上 crossorigin 属性：

再看一下网络请求，就变成一条了。

W3 规范是这么解释的：

> Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

那为何会有两条请求，且优先级不一致，又没有命中缓存呢？这就得引出下一个话题来解释了。

## 不同资源加载的优先级规则 ##

我们先来看一张图：![format_png 9][]

> 这张表详见：Chrome Resource Priorities and Scheduling

这张图表示的是，在 Chrome 46 以后的版本中，不同的资源在浏览器渲染的不同阶段进行加载的优先级。在这里，我们只需要关注 DevTools Priority 体现的优先级，一共分成五个级别：

*  Highest 最高
 *  Hight 高
 *  Medium 中等
 *  Low 低
 *  Lowest 最低

![format_png 10][]

### html 主要资源，其优先级是最高的 ###

![format_png 11][]![format_png 12][]

### css 样式资源，其优先级也是最高的 ###

![format_png 13][]CSS(match) 指的是对已有的 DOM 具备规则的有效的样式文件。![format_png 14][]

### script 脚本资源，优先级不一 ###

![format_png 15][]![format_png 16][]前三个 js 文件是写死在 html 中的静态资源依赖，后三个 js 文件是根据首屏按需异步加载的组件资源依赖，这正验证了这个规则。

### font 字体资源，优先级不一 ###

![format_png 17][]![format_png 18][]css 样式文件中有一个 @font-face 依赖一个 font 文件，样式文件中依赖的字体文件加载的优先级是 Highest；在使用 preload 预加载这个 font 文件时，若不指定 crossorigin 属性(即使同源)，则会采用匿名模式的 CORS 去加载，优先级是 High，看下图对比：第一条 High 优先级也就是 preload 的请求：![format_png 19][]

第二条 Highest 也就是样式引入的请求：![format_png 20][]

可以看到，在 preload 的请求中，缺少了一个 origin 的请求头字段，表示这个请求是匿名的请求。让这两个请求能共用缓存的话，目前的解法是给 preload 加上 crossorigin 属性，这样请求头会带上 origin, 且与样式引入的请求同源，从而做到命中缓存：

这么请求就只剩一个：![format_png 21][]![format_png 22][]在网络瀑布流图中，也显示成功预加载且后续命中缓存不再二次加载：![format_png 23][]

## 总结 ##

preload 是个好东西，能告诉浏览器提前加载当前页面必须的资源，将加载与解析执行分离开，做得好可以对首次渲染带来不小的提升，但要避免滥用，区分其与 prefetch 的关系，且需要知道 preload 不同资源时的网络优先级差异。

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

参考资料：

*  https://www.w3.org/TR/preload/
 *  https://www.w3.org/TR/resource-hints/
 *  Prioritizing Your Resources with link rel='preload'
 *  Preload, Prefetch And Priorities in Chrome
 *  A Link: rel=preload Analysis From the Chrome Data Saver Team

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80S0Z1cDJhNERPRjFzWEhtT3dJcGtBWGhpYW8wblk5QVdZUFc0aWFHQlowNzFnM1kxQm5Bdm1PQ0EvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanQ1bTNSMTltaWIzclk0ejVlaWN0Vk1VVTkwbnpOTGZpYWlhM3hJblM1cXVXbHM0N2ljRkJ6dXhDaWFNQWcvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRzSDAya2w4REhjOUdBMGNIUDZpY21oUDdmTTdSbGdNUThkd0NpYzlTTlNYTzE3QnVxeGJDdXE0dy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanQ4aWFIYldPNmhxOGp5TVlNOFppYkZ3b3Q3aGJyVnRMZ3hoSFJYcWZ6dUdSZXg4UEdweXpKQmliV3cvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRTRU5iV2pYOFBjZDdOaWJpY3BaWlF0aEVsdVQ3TzJBV1M5cFl2bjB4azl6d3NrM0pMbHFmNmZxUS82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanR2b2duS081SWNua1A1bmNMaWNLSmFCSXZ6a05OVDdtVFM1aWJQSVdxdjR5Tk1La0UyN25NYVJLUS82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanQyTkl0cXhZSzlCRlNaNFgwZzJLZEdWSWhEQzdnbVVIazdwb2ZlNFVrc2FkdG5lWkFhaWFPenRRLzY0MA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRIQ3h4amVkRUpTdFdNMEgyNktxM2cxcTg4djJ4NWVwREJrRks4b3lpYWtIQlJzYWxGeENNU1JnLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRwckJNaEg2OFkzUjJPWlFpYVhqbE0xUmM3T2lhd3hOekZpYXdWcmRYelpmZXIyZkh4aWNkSHNTSDVBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80aFlBelp4SDZuOTRtbkxSeUs3MHZsa1RHRjl0T0ladU5yUThVUkNkdU1kazhyTlJ6SW9IMjV3LzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanQ4MGNQSkJaWXdhY0NBMmVYSFVZN0d4U3ZZb0R5elpsb1NqMG1pYnR5alMyaWNLdVp2cWpRZzRxdy82NDA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRGc1hBTXgxMWljaWNNMWlibXQyYnVra2lhME9KSmlhWkFLaWJKUmMydmp5MTlOOHlEMGliUllsUlI3TnpBLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRWT2VpYlJSdkpRakFncWpTVXRPaHNTVW5PNlBVQ2lhQ0pHY0RjMFloSTlaaERCZ0xmS01YaWJYTncvNjQw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRGd21NdFN2dWRSaWFpY21xaDM3SnR3MmUwMFhYZnB3QnRLNno2U29jQ1MyVU43dUVYQ3NJelZLUS82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRldG5mMTU0RUF6WDZyaWMyVUNZcDI3akd2ejZ1Y0VNNzloQ3JtVk5GaWJCN0FyYjZvbjF3d2VKdy82NDA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRGbko0YWh4dGRkVVVVcUNDTzF3aWNVN1hpYjE0ZXFtV1V5VXZGOHhLcmtCNnpOdEppYnlCYXNFTncvNjQw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MEI3RnYyUE1WVDFxYkExaWFvenphanRTVFlpY3M4bktZWkRpYzVuc1hweVlnbEJBWHBnTW1saklpYXZFSzJpYkVHM0c5cVU5cnp2WGZ6dzNRLzY0MA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80RGZwZVFuUVp5dDZSYjB0aWFzOWs0Y1hvZUV4WEMybTdrWHVkN0J1dTNwdGtVcGZCU3JBQWgwUS82NDA?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80dlh6QjlSOUFybXRTMng3aWJDdldsUUg0TU9yQmNGWThnVXlTSmljaE9oWUtZZllIeUlXaE1sY3cvNjQw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80Z2pJT2tKZUU4U2ZQblhWMHhBdVEwaWNwUTVIR0ZvZ1hsMTI4cGpyejF5Zkh4R2FORG80YWUydy82NDA?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80c2prUnQ2YUlMaWFCaWM4cWZIZzZLY3lpYTg5MnIyQkxtYlluWExYZVlmSzdWaWJPeVJYdWp2bkdYUS82NDA?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80TXhQalZ5S3JhMEczMFNWMkhHVEIwZHQzaWN1MmlhcEhXdmpLTEJtaWNmWURsVzFtTjQ3VFh3d0ZRLzY0MA?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80djFTa25pYnFqYktvMUxUdmFvUm9KZXVCdzhDc1dOc1hoYTF4WGNHSW56YlpOWmlhTXZYc0pZbGcvNjQw?x-oss-process=image/format,png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9Sc1V0aFcyV1pUZEpQS29lRUtIRUNYVWljUWlhd0d3ek80SWxpYllXaWNpY2NEUkszSU5oNjZYMXg5UTVlWGZPMjBybFJSSWJ2THRKUUN3bjcwYjhvYmZYZHF3LzY0MA?x-oss-process=image/format,png