返回

使用Prefetch Preload减少JS加载时间

2023-10-20 Prefetch Preload JS 减少JS加载时间 JS加载 3729 0

使用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)标记:

使用Prefetch Preload减少JS加载时间

预加载 Preload

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

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

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

使用Prefetch Preload减少JS加载时间

预连接 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等资源加载耗时大幅减少,产生了显著的优化效果:

使用Prefetch Preload减少JS加载时间

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

DOVE 网络加速器免费试用

顶部