使用Prefetch Preload减少JS加载时间

使用Prefetch Preload减少JS等资源文件的加载时间，让JS文件的加载耗时从1.4秒减少到0.4秒，大幅减少951ms（-67%），代码实现也非常简单方便。

资源优先级提示：预取回 Prefetch，预加载 Preload 和预连接 Preconnect。

资源优先级提示是浏览器平台为控制资源加载时机而设计的一系列API，主要包括：

预取回 Prefetch

用于提示浏览器在CPU和网络带宽空闲时，预先下载指定URL的JS，图片等各类资源，存储到浏览器本地缓存中，从而减少该资源文件后续加载的耗时，优化用户体验。

具体使用方式是将link标签的rel属性设为prefetch，并将href属性设为目标资源URL，例如 <link rel="prefetch" href="

https://xxx.com/xxx.js" />。

该标签插入DOM后，将触发一次href属性值对应URL的请求，并将响应保存到本地的prefetch cache中，同时不会解析、运行该资源。

可以预取回的资源有很多：JS、CSS、各种格式的图片、各种格式的音频、WASM文件、字体文件、甚至HTML文档本身都可实施 prefetch，预先缓存。

命中预取回缓存的请求，在开发者工具中的Network标签中的Size列，会有独特的(prefetch cache)标记：

预加载 Preload

与预取回不同，预加载用于提高当前页面中资源加载的优先级，确保关键资源优先加载完成。

预加载最常见的用法是用于字体文件，减少因字体加载较慢导致的文字字体闪烁变化。例如：<link rel="preload" as="font" href="/main.woff" />

应用了preload提示的资源，通常会以较高的优先级率先在网页中加载，例如下图中的nato-sans.woff2请求，Priority列的值为High，加载顺序仅次于Document本身。

预连接 Preconnect

用于提前与目标域名握手，完成DNS寻址，并建立TCP和TLS链接。

具体使用方式是将link标签的rel属性设为preconnect，并将href属性设为目标域名，例如 <link rel="preconnect" href="https://github.com" />。

优化效果是通过提前完成DNS寻址、建立TCP链接和完成TLS握手，从而减少后续访问目标域名时的连接耗时，改善用户体验。

注意！建议只对重要域名进行Preconnect优化，数量不要超过 6 个。因为Preconnect生效后，会与目标域名的保持至少10秒钟的网络连接，占用设备的网络和内存资源，甚至阻碍其他资源的加载。

DNS预取回 DNS-Prefetch

与上文的预取回Prefetch不同，DNS预取回用于对目标域名提前进行DNS寻址，取回并缓存域名对应的IP地址，而非像预取回Prefetch那样缓存文件资源。

具体使用方式是将link标签的rel属性设为dns-prefetch，并将href属性值设为目标域名，例如 <link rel="dns-prefetch" href="https://github.com" />。

优化效果是通过提前解析出目标域名的IP地址，从而减少后续从目标域名加载资源的耗时，加快页面加载速度，改善用户体验。

通常来说，解析DNS的耗时往往有几十甚至几百毫秒，对资源加载耗时有直接影响。

DNS预取回的能力与预连接Preconnect有所重合，以往因为dns-prefetch的浏览器兼容性略好于preconnect，往往两者一同使用。 但近年来，IE被废弃，用户大都已更新到现代浏览器，兼容性不再重要，单独使用preconnect即可替代dns-prefetch。

例如，我们的静态资源部署在域名为static.zhihu.com的CDN上，那么添加如下2行HTML代码：

<link rel="preconnect" href="static.zhihu.com" />
<link rel="dns-prefetch" href="static.zhihu.com" />

就能观察到CDN上的JS、CSS等资源加载耗时大幅减少，产生了显著的优化效果：