学会preload和prefetch

蔚落 2023-10-07 20:06 23阅读 0赞

**preload和prefetch是什么？**

我们常说的preload和prefetch，是link标签rel里新增的两种值，用于让浏览器提前加载指定的资源，它们会先被缓存（属于http cache缓存），达到优化网页速度的目的。

本文将以代码示例的形式一步步讲解preload和prefetch。

1.准备四个文件：index.html，index.js，prefetch.js，preload.js

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>preload prefetch</title>
      <link rel="stylesheet" href="index.css">
      <link rel="preload" href="preload.js" as="script">  
    </head>
    <body>
    <script src="index.js"></script>
    <script src="preload.js"></script>
    </body>
    </html>

index.js

console.log('index')

preload.js

console.log('preload')

prefetch.js

console.log('prefetch')

2.运行一下页面，想象一下页面的网络加载顺序，可以看到结果:

![800ceeced40e84a1d7b652359d7b0cd4.png][]

3.把准备好的preload.js以preload形式插入index.html

**注意：**不要漏掉as属性，它用来指定预加载的资源类型，没有as属性会导致浏览器发出警告<link rel=preload> must have a valid \`as\` value

这时候再观察浏览器的请求顺序，会发现preload.js的加载比index.js提前了，甚至比index.css还要提前。

![72bbc4405de503a81188ee800f188ffc.png][]

再看控制台输出的执行结果：

![9acac307e45d4b35c9f162415e4229a2.png][]

这说明preload会把资源加载的优先级提高。

在这个过程里，preload会先预加载好preload.js资源，但是不会立即执行，等到script标签引入preload.js的时候才会执行。

preload除了可以加载js文件，还可以加载很多其他类型的问题，只要改变as的值即可，比如style，image，font，video，一样可以起到改变加载优先级的作用。

4.修改index.html代码，引入prefetch.js

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>preload prefetch</title>
     6   <link rel="stylesheet" href="index.css">
     7   <link rel="preload" href="preload.js" as="script">
     8   <link rel="prefetch" href="prefetch.js">  
     9 </head>
    10 <body>
    11 <script src="index.js"></script>
    12 <script src="preload.js"></script>
    13 </body>
    14 </html>

再次观察现在的网络加载的情况

![b935c26f7b6eca21a9104f90f81d1f78.png][]

可以看到虽然prefetch的link标签位置很高，但是prefetch.js的加载优先级并不高。

再看一下控制台输出

![4d9e649606068cb761a80a3f5598829d.png][]

控制台输出并没有变，说明prefetch.js并未执行。  
可以看出prefetch的优先级比较低，它主要用于预加载本页面未来可能加载到的资源或者跳转到的页面。

所以src里除了填写js文件地址，也可以是网址，为a标签的跳转链接做预加载用。

从图中可以看出：

1.  HTML/CSS 资源，其优先级是最高的
2.  font 字体资源，优先级分别为 Highest/High
3.  图片资源，如果出现在视口中，则优先级为 High，否则为 Low

而 script 脚本资源就比较特殊，优先级不一，脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级：

1.  网络在第一个图片资源之前阻塞的脚本在网络优先级中是 High
2.  网络在第一个图片资源之后阻塞的脚本在网络优先级中是 Medium
3.  异步/延迟/插入的脚本（无论在什么位置）在网络优先级中是 Low

### webpack优化之preload和prefetch ###

单页面应用由于页面过多，可能会导致代码体积过大，从而使得首页打开速度过慢。所以**切分代码，优化首屏打开速度尤为重要**。

但是所有的技术手段都不是完美的。当我们切割代码后，首屏的js文件体积减少了好多。但是也有一个突出的问题：

那就是当跳转其他页面的时候，需要下载相应页面的js文件，这就导致体验极其不好，每一次点击访问新页面都要等待js文件下载，然后再去请求接口获取数据。频繁出现loading动画的体验真的不好

所以如果我们在进入首页后，在浏览器的空闲时间提前下好用户可能会点击页面的js文件，这样首屏的js文件大小得到了控制，而且再点击新页面的时候，相关的js文件已经下载好了，就不再会出现loading动画。

#### 动态引入js文件，实现code-splitting，减少首屏打开时间 ####

按引入情况加载，只需添加注释即可

*  代码分割注释：/\*webpackChunkName: 'mp-supports'\*/
 *  prefetch注释：/\* webpackPrefetch: true \*/

#### 特殊用法 ####

1.  preload 可以定义资源加载完毕后的`回调函数`，如下：

1.  可以使用`preload`的样式表立即生效。

1.  对于加载跨域的资源，必须加上 `crossorigin` 属性。

1.  `link`标签还可以接收一个`media`属性，进行简单的媒体查询。

[800ceeced40e84a1d7b652359d7b0cd4.png]: https://img-blog.csdnimg.cn/img_convert/800ceeced40e84a1d7b652359d7b0cd4.png
[72bbc4405de503a81188ee800f188ffc.png]: https://img-blog.csdnimg.cn/img_convert/72bbc4405de503a81188ee800f188ffc.png
[9acac307e45d4b35c9f162415e4229a2.png]: https://img-blog.csdnimg.cn/img_convert/9acac307e45d4b35c9f162415e4229a2.png
[b935c26f7b6eca21a9104f90f81d1f78.png]: https://img-blog.csdnimg.cn/img_convert/b935c26f7b6eca21a9104f90f81d1f78.png
[4d9e649606068cb761a80a3f5598829d.png]: https://img-blog.csdnimg.cn/img_convert/4d9e649606068cb761a80a3f5598829d.png