优化JS加载耗时

优化JS加载耗时时长

在这里插入图片描述

									资源优先级优化效果示例.png

仅需2行代码，就能实现上图中的优化效果，让JS文件的加载耗时从1.4秒减少到0.4秒，「大幅减少951ms（-67%）」，代码实现也非常简单方便，一起学起来吧。

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

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

1. 四类资源优先级提示

1. 预取回 Prefetch

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

具体使用方式是将link标签的rel属性设为prefetch，并将href属性设为**「目标资源URL」**，例如 ``。

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

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

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

 DEMO：https://output.jsbin.com/cuxerej

在这里插入图片描述

crossorigin属性是浏览器同源策略的一部分，用于对link、script、img等元素指定是否允许以跨域资源共享模式加载目标资源。
默认情况下，JS脚本、图片等部分静态资源不受同源策略的限制，可以从任何跨域域名加载第三方JS文件、图片文件。
这样的规则有明显的安全风险，例如：
第三方JS文件可以访问第一方网站的错误上下文，从而获取内部信息。
第三方JS文件、图片文件的源服务器可以在请求过程中通过SSL握手验证、cookies等手段获取用户信息。
为了缓解这些安全风险，浏览器引入了可用于script、img和link标签的crossorigin属性，对于这些标签加载的资源：
没有crossorigin属性，就无法获取JavaScript的错误上下文。
将crossorigin设置为"anonymous"，可以访问JavaScript的错误上下文，但在请求过程中的SSL握手阶段不会携带cookies或其他用户凭据。
将crossorigin设置为"use-credentials"，既可以访问JavaScript的错误上下文，也可以在请求过程中的SSL握手阶段时携带cookies或用户凭据。
此外，Chrome浏览器的HTTP缓存以及相应的Prefetch、Preconnect资源优先级提示也会受到crossorigin属性的影响。
对于跨域资源，则其资源优先级提示也需要设置为跨域，即crossorigin="anonymous"，例如：<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" crossorigin="anonymous" />
资源是否跨域，可以依据浏览器自动附带的Sec-Fetch-Mode请求头判断：
值为no-cors，表示当前资源加载的模式并「非」跨域资源共享模式。其对应的资源优先级提示「不」需要设置为跨域crossorigin="anonymous"。
值为cors，表示当前资源加载的模式「是」跨域资源共享模式。其对应的资源优先级提示「需要」设置为跨域crossorigin="anonymous"。

在这里插入图片描述

2. 预加载 Preload

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

预加载最常见的用法是用于字体文件，减少因字体加载较慢导致的文字字体闪烁变化。例如：``

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

DEMO：https://output.jsbin.com/cuxerej

在这里插入图片描述

 `as`属性是必填属性，是`link`标签带有`rel="preload"`属性时，确定不同类型资源优先级的依据。完整可选值请参考MDN：link attribute as

3. 预连接 Preconnect

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

具体使用方式是将link标签的rel属性设为preconnect，并将href属性设为目标**「域名」**，例如 ``。

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

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

4. DNS预取回 DNS-Prefetch

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

具体使用方式是将link标签的rel属性设为dns-prefetch，并将href属性值设为**「目标域名」**，例如 ``。

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

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

DNS预取回往往与预连接配合使用，能显著减少HTTP资源的加载耗时，例如：


优化前（「无」`Preconnect && DNS-Prefetch`）	优化后（「有」`Preconnect && DNS-Prefetch`）	差异
加载耗时	1400 ms	451 ms	-949 ms (-67%)
开发者工具计时截图			在DevTool - Network - 资源 - 计时（Timing）面板中可以看到，因为`Preconnect && DNS-Prefetch`优化生效，连接开始阶段的耗时从950ms降低到了1ms，使得资源的整体加载耗时大幅减少。
在线DEMO	https://jsbin.com/panorej/edit?html	https://jsbin.com/haragis/edit?html

5. 四类资源优先级提示对比

类型	优化目标	示例	注意事项
预取回 Prefetch	- 加载优先级较低的资源 - 后续页面浏览需要加载的资源	``	1. Prefetch 预取回的资源并不会被立刻「解析、运行」：例如预取回JS文件时，JS文件内的代码逻辑并不会执行，只是文件保存到了浏览器缓存中。这也是Prefetch与普通 link 标签（``）的核心区别。 2. Prefetch 的触发时机不固定，会由浏览器相机决定，浏览器通常会在网络带宽、CPU运算都空闲时触发下载。
预加载 Preload	- 「当前」页面需要「优先」加载的静态资源	``	- 优化目标为当前页面所需资源，而非后续加载。
预连接 Preconnect	- 加载优先级较低的「域名」 - 后续页面浏览需要连接的「域名」	``	- 用于跨域域名，同源域名不需要 - 控制只对关键域名应用，避免数量超过6个
DNS预取回 DNS-Prefetch	- 后续页面浏览需要连接的「域名」	``	（同预连接 Preconnect）

在2022年初，Chrome 102 新增了fetch-priority属性，可用来更精细地控制资源加载的优先级，目前仍处于实验阶段，未来可能会更加完善，示例如下：

<img src="important.jpg" fetchpriority="high">
<img src="small-avatar.jpg" fetchpriority="low">

<script src="low-priority.js" fetchpriority="low"></script>

// 只对 preload link 标签生效
<link href="main.css" rel="preload" as="image" fetchpriority="high">

2. 示例：用resource-hint-generator为前端项目增加资源优先级提示

笔者基于多年实践，制作了一套方便实用的资源优先级提示生成工具，目前已发布为 NPM 包：resource-hint-generator。

下面我们以本书配套的fe-optimization-demo项目为例，演示如何接入该库，为我们的前端项目方便快捷地增加各类资源优先级提示。

《接入resource-hint-generator》完整示例 Merge Request 请参考https://github.com/JuniorTour/fe-optimization-demo/pull/1

1. 安装依赖，并添加运行命令及参数

npm install resource-hint-generator --save-dev

并新建配置文件resource-hint-generator-config.js到项目根目录：

// resource-hint-generator-config.js
module.exports = {
    
    
  resourcePath: `./dist`,
  projectRootPath: __dirname,
  resourceHintFileName: `resource-hint.js`,
  includeFileTestFunc: (fileName) => {
    
    
    return /(main.*js)|(main.*css)/g.test(fileName);
  },
  crossOriginValue: '',
  publicPath: 'https://github.com/JuniorTour',
  preconnectDomains: ['https://preconnect-example.com'],
};

主要参数说明：

resourcePath：打包产物路径
includeFileTestFunc：指定一个函数，返回布尔值表示，遍历distPath找到的的fileName，是否会被作为``的href属性值
publicPath：部署目标环境的CDN域名，用于和includeFileTestFunc、includeFileNames匹配到的文件名，拼接出``标签的href属性值
preconnectDomain：指定一个数组，数组中的每个字符串元素，都将产生2个href属性值为当前字符串的标签和标签

2. 在项目打包构建完成后，运行生成工具

我们的目标是在项目打包完成后，遍历产物文件，生成对应的资源优先级提示。因此我们需要在项目构建完成后，运行resource-hint-generator。

例如，我们的前端项目通过调用 npm run build 运行打包构建，那只需要在这条命令中追加运行resource-hint-generator的逻辑即可实现我们的目标。
具体做法是，在package.json的scripts中添加generate-resource-hint命令，运行resource-hint-generator，并将&& npm run generate-resource-hint补充到原来的build命令中：
```
// package.json
"scripts": {
      
      
    "generate-resource-hint": "resource-hint-generator",
    "build": "cross-env NODE_ENV=production webpack && npm run generate-resource-		hint",
}
```
测试运行构建后，如果在打包产物文件夹（./dist）中找到了生成的resource-hint.js文件，并且其中包含我们配置的 prefetch，preconnect目标数据，就说明配置完成。

3. 项目上线后，加载运行生成的`resource-hint.js`

推荐在登录页，活动页，官网首页等前端项目外页面**「提前加载运行」**resource-hint.js ，从而在项目加载时，充分利用这些提前加载的缓存。

《接入resource-hint-generator》完整示例 Merge Request 请参考https://github.com/JuniorTour/fe-optimization-demo/pull/1

在这里插入图片描述

3. 验证，量化与评估

1. 上线前验证

优化上线前，在本地开发环境或设法直接到生产环境验证优化效果必不可少。

各类资源优先级提示是否生效，可以通过开发者工具中的网络 Network 面板判断。我们主要使用优先级列（Priority），体积列（Size）和加载时间序标签页（Timing）判断。

类型	验证测试方式	生效依据
预取回 Prefetch	在页面中添加prefetch目标资源的link标签，检查`Network`面板。例如，在生产环境中的页面上，打开浏览器控制台直接运行下列代码验证测试： `function addLinkTag(src, { rel, crossoriginVal }) { const tag = document.createElement('link'); tag.rel = rel; tag.href = src; // enable crossorigin so that prefetch cache works for // Cross Origin Isolation status. if (crossoriginVal !== undefined) { tag.setAttribute('crossorigin', crossoriginVal); } const head = document.querySelector('head'); if (head && head.appendChild) { head.appendChild(tag); } } addLinkTag('https://your-domain.com/static/main.h1712oidw.js', { rel: 'preferch', });`	优化目标资源加载后在`Network`面板中的`Size`列，值为独特的`(prefetch cache)`标记，且加载耗时极短（小于50毫秒）：不生效解决方案- 检查请求资源是否为跨域资源，添加对应的`crossorigin`属性值 - 确认prefetch请求和优化目标资源请求的先后顺序，确保prefetch请求率先完成。
预加载 Preload	`preload`往往需要在较早的时机插入DOM，从而确保资源优先加载，如果在浏览器控制台执行脚本时机太晚，也可以考虑用`Charles`等代理工具拦截、替换响应体，插入preload标签	优化目标请求的`Priority`列的值为`High`，且加载时间较早，仅次于Document本身：
预连接 Preconnect 和DNS预取回 DNS-Prefetch	也可通过浏览器控制台直接运行下列代码验证测试： `addLinkTag('https://your-domain.com', { rel: 'preconnect', }); addLinkTag('https://your-domain.com', { rel: 'dns-prefetch', });`	在浏览器开发者工具中的 Network - 资源 - 计时（Timing）面板中可以看到，如果`Preconnect && DNS-Prefetch`优化生效，目标优化资源`连接开始阶段`的耗时会大幅减少到接近1ms，例如：

2. 建立量化监控指标

3. 评估优化效果

基于前文介绍的优化效果，我们可以通过对比2类监控指标在优化前后的变化来评估优化效果：

1. `FCP` 和 `LCP`

JS,CSS等各类静态资源更快的加载，更多的命中本地缓存，可以显著减少页面渲染耗时，预期也能改善我们在第一章介绍的web-vitals首次内容绘制FCP，最大内容绘制LCP2项用户体验指标。

建立web-vitals用户体验监控指标的内容详见：前端优化数据量化必备神器：Grafana《现代前端工程体验优化》第一章 数据驱动 第二节 用户体验数据收集与可视化

2. 缓存命中率指标

此外收集优化前后生产环境中用户资源请求是否命中缓存，也可以更直接地来判断优化效果。

我们可以基于Performance API的entry.duration属性来实现缓存命中率指标，示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Report CacheHit metric</title>
    <link
      rel="prefetch"
      href="https://static.zhihu.com/heifetz/6116.216a26f4.7e059bd26c25b9e701c1.css"
    />
  </head>
  <body>
    <script>
      // 上报数据到 Grafana
      function report(name, label) {
      
      
        // ...
      }

      // 检查资源加载是否命中缓存
      function checkResourceCacheHit() {
      
      
        // 获取页面加载性能信息
        const perfEntries = performance.getEntriesByType('resource');

        for (const entry of perfEntries) {
      
      
          // 判断资源的加载时间是否小于50毫秒
          // 50ms 来自于经验总结，可以根据实际情况调整
          let hitCache = entry.duration < 50;
          report('cacheHiteRate', hitCache);
        }
      }

      setTimeout(() => {
      
      
        checkResourceCacheHit();
      }, 3000);
    </script>
  </body>
</html>

将收集到的数据上报到Grafana后，加以格式化，我们就可以做出如下图的缓存命中率可视化图表：

在这里插入图片描述

4. 判断优化效果

首先，记录优化前状态：在优化上线前提前上线监控指标，并收集一段时间的指标数据。建议上线前持续观察7至15天，从而尽量避免来自用户的指标数据受到工作日和节假日的影响，而产生异常波动。

Grafana Cloud 的免费用户自带 14 天数据保存时长，超过这一时长的数据会被删除。

其次，优化上线后间隔几天多次观察，并在优化上线后1至3个月后回归优化效果，确保效果稳定。

如果资源优先级提示这一优化生效，我们应该能观察到 FCP 和 LCP 有明显的改善，例如下图：
在这里插入图片描述

观察FCP的评分百分比可视化图，在4月30日优化上线后，评分为优的用户占比从优化前的约50%，显著提升到了90%。

再观察一段时间这一指标，如果评分优的占比都能稳定在90%，那我们就有理由判定**「资源优先级优化显著地提升了用户体验！」**

同样的，我们也可以观察**「缓存命中率指标」**来判断优化效果，例如下图：

在这里插入图片描述

观察缓存命中率可视化图，在4月30日优化上线后，缓存命中率从优化前的约40%，显著提升到了70%。同样可以佐证我们的优化产生了显著的正向收益。

)]

观察FCP的评分百分比可视化图，在4月30日优化上线后，评分为优的用户占比从优化前的约50%，显著提升到了90%。

再观察一段时间这一指标，如果评分优的占比都能稳定在90%，那我们就有理由判定**「资源优先级优化显著地提升了用户体验！」**

同样的，我们也可以观察**「缓存命中率指标」**来判断优化效果，例如下图：

在这里插入图片描述

观察缓存命中率可视化图，在4月30日优化上线后，缓存命中率从优化前的约40%，显著提升到了70%。同样可以佐证我们的优化产生了显著的正向收益。