走起，来吧少年
1、preload
称为预加载，主要用于提升当前页面资源加载的优先级（注意是当前页面），提前加载，但是不会执行，在需要用到的时候才开始执行
<link rel="preload" as="script" href="./xx.js">
<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
as 可以指定别的资源类型，比如：
- style 样式表；
- font：字体文件；
- image：图片文件；
- audio：音频文件；
- video：视频文件；
- document：文档。
使用 Preload 的好处
- 允许浏览器来设定资源加载的优先级因此可以允许前端开发者来优化指定资源的加载。
- 赋予浏览器决定资源类型的能力，因此它能分辨这个资源在以后是否可以重复利用。
- 浏览器可以通过指定
as属性来决定这个请求是否符合 content security policy。 - 浏览器可以基于资源的类型（比如 image/webp）来发送适当的
accept头。
2、prefetch
则是用于加载未来（比如下一个页面）会用到的资源，利用浏览器在空闲的时候去下载，它会将下载资源的优先级其实是降低的。下一个页面就可以直接从缓存里面读取
<link rel="prefetch" href="/uploads/images/pic.png">
3、preconnect
（提早建立和第三方源的连接），我们浏览器请求一个资源时候，需要三个步骤，DNS解析，TCP链接，SLL(加密链接的确保)。这些步骤都需要和服务器通信，一来一往的时间就会耗时不少
当我们的站点需要对别的域下的资源进行请求的时候，就需要和那个域建立连接，然后才能开始下载资源，如果我都已经知道了是和哪个域进行通信，那不就可以先建立连接，然后等需要进行资源请求的时候就可以直接进行下载了
<link rel="preconnect" href="https://b.com">
4、dns-prefetch
对指定域名进行DNS解析，后续请求该域名下的资源时候省除了DNS解析时间
<link rel="dns-prefetch" href="https://cdn.bootcss.com">
- 好了，今天就介绍到这里，下面我来总结下今天的主要内容。
1、结语
感谢各位老铁，点赞加关注
