在 web 性能优化中， 我们总想尽办法，加速首屏的资源加载与渲染。preload 和 prefetch的出现，为我们提供了 更加细粒度的控制浏览器加载资源的方法。
prefetch和preload都是HTML中的链接标签，用于优化资源的预加载，以提高页面加载速度和性能。它们的主要区别在于加载时机和优先级。
preload
preload 是一个声明式的 fetch，可以强制浏览器在不阻塞 document的 onload 事件的情况下，请求资源。preload 顾名思义是一种资源的预加载方式，它通过向浏览器声明，去提交资源加载的需求，当资源真正被使用的时候立即执行，无需等待网络的消耗。
使用方式
使用方式：
1 | <link rel="preload" as="script" href="xxxx.js"></link> |
其中， rel 属性值为 preload，as属性用于规定资源的类型，并根据资源设置 Accept 请求头，以便能够使用正常的策略去请求对应的资源； href 为资源请求地址
as 可取值为 style, script, iamge, font, fetch, document, audio, vidoe等。如果 as 属性被省略，请求会被当做异步请求处理。
另外，在请求跨域资源时，推荐加上 crossorigin 属性，否则可能会导致资源的二次加载（尤其是 font 资源）
1 | <link rel="preload" as="font" href="xxxx.com" crossorigin="anonymous"></link> |
特点
- preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；
- preload可以支持加载多种类型的资源，并且可以加载跨域资源；
- preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载 相应的脚本代码，待到需要时自行调用；
prefatch
prefetch 告诉浏览器这个资源将来可能需要，但是具体的加载时间，由浏览器决定。prefetch 是一种利用浏览器的空闲时间在加载页面将来可能用到的资源的一种机制，通常可以用来加载非首页的其他页面所需的资源，以便加快后续页面的首屏速度。
prefetch加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟（无论资源是否可以缓存）；并且，当页面跳转时，未完成的prefetch请求不会被中断；
使用方式
它的用法跟 preload 是一样的：
1 | <link rel="prefecth" as="sacript" href="xxxx.js"></link> |
区别
| — | preload | prefech |
|---|---|---|
| 作用 | preload标签用于告知浏览器提前预加载指定的资源（通常是当前页面即将用到的资源），以优先加载和缓存这些资源，加速页面渲染。 | prefetch标签用于告知浏览器在空闲时间预加载指定的资源（通常是页面未打开的资源），以便后续可能用到。它并不会阻塞页面的加载和渲染过程。 |
| 加载时机 | 浏览器会在解析preload标签时立即开始加载指定的资源，并将其优先级提高，尽快获取资源。 | 浏览器会在当前页面加载完毕后，在空闲时间异步加载prefetch标签指定的资源。 |
| 优先级 | preload的优先级较高，它会被浏览器优先加载，有利于提高页面渲染速度。 | prefetch的优先级较低，不会影响首屏渲染。浏览器会根据网络情况和设备资源来决定是否加载预加载的资源。 |
注意事项：
- prefetch和preload不会阻塞主文档的加载，但它们可能会影响其他资源的加载。
- 使用prefetch和preload时，要确保只预加载或预取真正需要的资源，避免浪费带宽和资源。
- 预加载的资源如果没有被使用到，会对性能产生不必要的开销，因此需要根据实际场景进行选择和优化。
综合来说，prefetch适合预加载未来可能用到的资源，而preload适合优先加载当前页面即将用到的关键资源，以提高页面加载速度。
