上报缓存命中率指标示例

对运行在浏览器中的前端应用来说，JS、CSS等各类静态资源加载的耗时，直接决定了页面的渲染速度，进而深刻影响着用户体验。所以这本书介绍的第一类优化方案，就是以优化静态资源加载耗时为目标的——资源优先级提示。在介绍开始前，我们先看一下优化的预期效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/867363cb3da84970baef3b5d466046fa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920\&h=1080\&s=215321\&e=png\&b=fefefe) 通过**资源优先级提示**，仅需2行代码，就能实现上图中的优化效果，让JS文件的加载耗时从1.4秒减少到0.4秒，**大幅减少951ms（-67%）** ，代码实现非常简单方便，让我们一起学起来吧\~ 资源优先级提示是浏览器平台为控制资源加载时机而设计的一系列API，主要包括： 1. 预取回 Prefetch 2. 预加载 Preload 3. 预连接 Preconnect 4. DNS预取回 DNS-Prefetch 共4类，下面我们一起来详细了解其功能和细节。 # 1. 四类资源优先级提示 ## 1. 预取回 Prefetch 预取回提示用于提示浏览器在CPU和网络带宽空闲时，预先下载指定URL的JS，图片等各类资源，存储到浏览器本地缓存中，从而减少该资源文件后续加载的耗时，从而优化用户体验。具体使用方式是将`link`标签的`rel`属性设为`prefetch`，并将`href`属性设为**目标资源URL**，例如 ``。该标签插入DOM后，将触发一次`href`属性值对应URL的HTTP请求，并将响应保存到本地的`prefetch cache`中，但是并不会进一步解析、运行该资源。可以预取回的资源有很多：JS、CSS、各种格式的图片、音频、WASM文件、字体文件、甚至HTML文档本身都可实施 prefetch，预先缓存。命中预取回缓存的请求，在开发者工具中的`Network`标签中的`Size`列，会有独特的`(prefetch cache)`标记： > DEMO： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69cc078389514ead826132e564a31b69~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920\&h=1030\&s=114595\&e=jpg\&b=25262a) ### `crossorigin`属性简介 `crossorigin`属性是浏览器同源策略的相关API，用于对`link`、`script`和`img`等元素指定以何种`跨域资源共享模式`加载目标资源。默认情况下，JS脚本、图片等部分静态资源不受同源策略的限制，可以从任何跨域域名加载第三方JS文件、图片文件。这样的规则有明显的**安全风险**，例如： * 第三方JS文件可以访问第一方网站的错误上下文，从而获取内部信息。 * 第三方资源的源服务器可以在HTTP请求过程中通过SSL握手验证、`cookies`等手段获取用户身份信息。为了缓解这些安全风险，浏览器引入了可用于`link`、`script`和`img`元素的`crossorigin`属性，对于这些元素加载的资源指定3类`跨域资源共享模式`，分别是： * 没有`crossorigin`属性：无法获取 JS 的错误上下文，也不会在SSL握手阶段附带Cookies等用户身份相关的信息。 * 将`crossorigin`值设置为`"anonymous"`：可以访问JavaScript的错误上下文，但在请求过程中的SSL握手阶段不会携带cookies或其他用户凭据。 * 将`crossorigin`值设置为`"use-credentials"`：既可以访问JavaScript的错误上下文，也可以在请求过程中的SSL握手阶段携带Cookies或用户凭据。此外，Chrome浏览器的**HTTP缓存**以及相应的Prefetch、Preconnect资源优先级提示效果也会受到`crossorigin`属性的影响。对于跨域资源，则其资源优先级提示也需要设置为跨域，即`crossorigin="anonymous"`，例如：`` 资源是否跨域，可以依据浏览器自动附带的`Sec-Fetch-Mode`请求头判断： * 值为`no-cors`，表示当前资源加载的模式并**非**跨域资源共享模式。其对应的资源优先级提示**不**需要设置为跨域`crossorigin="anonymous"`，**就能**命中Prefetch等专用缓存。 * 值为`cors`，表示当前资源加载的模式**是**跨域资源共享模式。其对应的资源优先级提示**需要**设置为跨域`crossorigin="anonymous"`或`"use-credentials"`，**才能**命中Prefetch等专用缓存。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2951fc04de664e00b95cebb75f87a011~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1074\&h=613\&s=111947\&e=png\&b=26272a) ## 2. 预加载 Preload 与预取回不同，预加载用于提高**当前**页面中资源加载的优先级，确保关键资源优先加载完成。预加载最常见的用法是用于字体文件，减少因字体加载较慢导致的文字字体闪烁变化。例如：`` 应用了`preload`提示的资源，通常会以较高的优先级**率先**在网页中加载，例如下图中的`nato-sans.woff2`请求，`Priority`列的值为`High`，加载顺序仅次于`Document`本身，能让字体较早在页面中渲染生效。 > `as`属性是必填属性，是`link`标签带有`rel="preload"`属性时，确定不同类型资源优先级的依据。 > > 完整可选值请参考[MDN：link attribute as](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes:~:text=global%20attributes.-,as,-This%20attribute%20is) > Preload 在线 DEMO： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c94bdd877b6b41d1a0556c73071eb81c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920\&h=1030\&s=163747\&e=png\&b=ffffff) ## 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预取回的能力与预连接Preconnect有所重合，这是因为以往`dns-prefetch的浏览器兼容性`略好于`preconnect`，往往两者一同使用。但近年来，IE被废弃，用户大都已使用更新版本的现代浏览器，兼容性不再重要，单独使用`preconnect`即可替代`dns-prefetch`。例如，我们的静态资源部署在域名为`static.zhihu.com`的CDN上，那么添加如下2行HTML代码：就能观察到CDN上的JS、CSS等资源加载耗时显著减少，因为preconnect的生效使得资源加载时的DNS寻址、SSL握手等阶段得以提前进行，各个资源加载是其耗时就大幅减少，产生了显著的优化效果。具体的优化效果可以参考这份数据： | | 优化前（无Preconnect && DNS-Prefetch） | 优化后（有Preconnect && DNS-Prefetch） | 差异 | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | 加载耗时 | 1400 ms | 451 ms | -949 ms (-67%) | | 开发者工具计时截图 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7dadeaea6edf4ab78c07e8d9642e8f7f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1444\&h=420\&s=134073\&e=png\&b=fcfcfc) | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38ec68b1333544eeb04c2507a453811b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1446\&h=367\&s=117788\&e=png\&b=fcfcfc) | 在DevTool - Network - 资源 - 计时（Timing）面板中可以看到，因为Preconnect && DNS-Prefetch优化生效，连接开始阶段的耗时从950ms降低到了1ms，使得资源的整体加载耗时大幅减少。 | | 在线DEMO | | | | ## 5. 四类资源优先级提示对比 | 类型 | 优化目标 | 示例 | 注意事项 | | ------------------- | --------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 预取回 Prefetch | - 加载优先级较低的资源
- 后续页面浏览需要加载的资源 | `` | 1. Prefetch 预取回的资源并不会被立刻解析、运行：例如预取回JS文件时，JS文件内的代码逻辑并不会执行，只是文件保存到了浏览器缓存中。
这也是Prefetch与普通 link 标签（``）的核心区别。
2. Prefetch 的触发时机不固定，会由浏览器相机决定，浏览器通常会在网络带宽、CPU运算都空闲时触发下载。 | | 预加载 Preload | - 当前页面需要优先加载的静态资源 | `` | - 优化目标为当前页面所需资源，而非后续加载。 | | 预连接 Preconnect | - 加载优先级较低的域名
- 后续页面浏览需要连接的域名 | `` | - 用于跨域域名，同源域名不需要 - 控制只对关键域名应用，避免数量超过6个 | | DNS预取回 DNS-Prefetch | - 后续页面浏览需要连接的域名 | `` | （同预连接 Preconnect） | > 注：在2022年初，Chrome 102 新增了`fetch-priority`属性，可用来更精细地控制资源加载的优先级，目前仍处于实验阶段，未来可能会更加完善，示例如下： > > ```html >

> > > // 只对 preload link 标签生效 > > ``` # 2. 示例：快速增加资源优先级提示笔者基于多年实践经验，制作了一套方便实用的资源优先级提示生成工具，目前已发布为开源NPM包：[resource-hint-generator](https://github.com/JuniorTour/resource-hint-generator)，支持根据构建产物，自动生成资源优先级提示代码。下面我们以本书配套的示例项目：[fe-optimization-demo](https://github.com/JuniorTour/fe-optimization-demo) 为例，演示如何接入该库，为我们的前端项目方便快捷地增加各类资源优先级提示。 > 《接入[resource-hint-generator](https://github.com/JuniorTour/resource-hint-generator)》完整示例代码 Merge Request 请参考： ## 1. 安装及配置[resource-hint-generator](https://github.com/JuniorTour/resource-hint-generator) 首先，我们需要安装NPM包，并添加运行命令及参数： ```js npm install resource-hint-generator --save-dev ``` 并在项目根目录，新建配置文件`resource-hint-generator-config.js`： ```js // resource-hint-generator-config.js module.exports = { distPath: `./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'], }; ``` 主要参数说明： * `distPath`：打包产物路径，也是生成的resource-hint.js输出路径； * `includeFileTestFunc`：指定一个函数，返回布尔值，表示遍历`distPath`所找到的`fileName`，是否会被作为prefetch的目标，即``的`href`属性值； * `publicPath`：部署目标环境的CDN域名，用于和`includeFileTestFunc`、`includeFileNames`匹配到的文件名，拼接出``标签的完整`href`属性值； * `preconnectDomains`：指定一个数组，数组中的每个字符串元素，都将产生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`命令中，代码示例请参考： ```json // 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`目标数据，就说明配置完成了。 #### `resource-hint.js`内容示例 > 注：生产环境中下列代码会被压缩成1行，并去除空格。 ```js /* Add resource hint link element, eg: */ try { (function (prefetchFilesPath, preconnectDomains) { const crossOriginAttrVal = ''; const CDN_HOST = 'https://github.com/JuniorTour'; if (!prefetchFilesPath || !prefetchFilesPath.length) { return; } function addLinkTag(src, { rel, crossoriginVal }) { const tag = document.createElement('link'); tag.rel = rel; tag.href = src; if (crossoriginVal !== undefined) { tag.setAttribute('crossorigin', crossoriginVal); } const head = document.querySelector('head'); if (head && head.appendChild) { head.appendChild(tag); } } function addPrefetchDNSTag(src) { addLinkTag(src, { rel: 'dns-prefetch', crossoriginVal: crossOriginAttrVal, }); } function addPreconnectTag(src) { addLinkTag(src, { rel: 'preconnect', crossoriginVal: crossOriginAttrVal, }); } function addPrefetchTag(src) { addLinkTag(src, { rel: 'prefetch', crossoriginVal: crossOriginAttrVal }); } if (prefetchFilesPath && prefetchFilesPath.forEach) { prefetchFilesPath.forEach((path) => { if (path) { addPrefetchTag(CDN_HOST + path); } }); } if (preconnectDomains && preconnectDomains.forEach) { preconnectDomains.forEach((domain) => { if (domain) { addPreconnectTag(domain); addPrefetchDNSTag(domain); } }); } })([ '/main.68eda6edda2178b7abfc.css', '/main.a45a5ff47f82fd159b80.js', ], [ 'https://preconnect-example.com', ] ); } catch (err) { console.log(`[resource-hint.js] ERROR: err=${err}`); } ``` 上述代码就是我们运行`resource-hint-generator`后生成的内容，自动包含了我们项目构建生成的`main.${hash}.css, main.${hash}.js`和期望建立预连接的域名`https://preconnect-example.com`。 ## 3. 加载生成的`resource-hint.js` 推荐在登录页，活动页，官网首页等**前端项目外**页面**提前加载运行**`resource-hint.js` ，从而在项目正式加载渲染时，充分利用这些提前下载的Prefetch缓存和提前建立的Preconnect HTTP连接。 > 《接入[resource-hint-generator](https://www.npmjs.com/package/resource-hint-generator)》完整示例请参考 Merge Request： > > ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5edb71480594a27a0ada3c9b40d00f9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1919\&h=994\&s=191225\&e=png\&b=0d1218) # 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('', { rel: 'preferch', });` | 优化目标资源加载后在Network面板中的Size列，值为独特的(prefetch cache)标记，且加载耗时极短，一般小于50毫秒：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8250fff4f3ab4db5bc37ce82a2cdf8f4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=830\&h=447\&s=141591\&e=png\&b=292a2e)
**不生效解决方案：**
- 检查请求资源是否为跨域资源，添加对应的crossorigin属性值
- 确认prefetch请求和优化目标资源请求的先后顺序，确保prefetch请求率先完成。 | | 预加载 Preload | preload往往需要在较早的时机插入DOM，从而确保资源优先加载，如果在浏览器控制台执行脚本时机太晚，也可以考虑用Charles等代理工具拦截、替换响应体，插入preload标签 | 优化目标请求的Priority列的值为High，且加载时间较早，仅次于Document本身，例如：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01d875882ba646b49de60d864e6dbf4a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1019\&h=938\&s=134221\&e=png\&b=272727) | | 预连接 Preconnect 和DNS预取回 DNS-Prefetch | 也可通过浏览器控制台直接运行下列代码验证测试： `addLinkTag('', { rel: 'preconnect', }); addLinkTag('', { rel: 'dns-prefetch', }); ` | 在浏览器开发者工具中的 Network - 资源 - 计时（Timing）面板中可以看到，如果Preconnect && DNS-Prefetch优化生效，目标优化资源连接开始阶段的耗时会大幅减少到接近1ms，例如：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/309927ba680c4c36b3addf903446aa94~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1446\&h=367\&s=103853\&e=png\&b=fcfcfc) | ## 2. 建立量化监控指标基于前文介绍的优化效果，我们可以通过对比2类监控指标在优化前后的变化来评估优化效果。 ### 1. `FCP` 和 `LCP` JS、CSS等各类静态资源更快的加载，更多的命中本地缓存，可以显著减少页面渲染耗时，预期也能改善我们在第1节介绍的`web-vitals`首次内容绘制指标`FCP`和最大内容绘制`LCP`2项用户体验指标。 ### 2. 缓存命中率指标收集优化前后生产环境中用户资源请求是否命中缓存数据，也可以更直接地判断优化效果。我们可以基于`Performance API`的`entry.duration`属性来实现缓存命中率指标，请看示例代码： ```html 上报缓存命中率指标示例 ``` > 注：如果担心用`entry.duration`小于50毫秒，判断不够准确，也可以考虑使用`entry.transferSize`（传输体积，单位：字节 byte）小于`0`来作为判断依据。 > > 但是，对于跨域域名，获取`transferSize`需要配置专门的[响应头Timing-Allow-Origin: \*](https://juejin.cn/book/7306163555449962533/section/7310567914266951695#:~:text=%E5%93%8D%E5%BA%94%E5%A4%B4Timing%2DAllow%2DOrigin%3A%20*) ，有一定额外成本。在上述示例中，我们将收集到的缓存命中率计数数据，通过[第2节](https://juejin.cn/book/7306163555449962533/section/7310260645843173428)介绍的`Node.js 数据收集应用`的HTTP接口`/counter-metric`，上报到了Grafana，再加以格式化，我们就可以做出如下图所示的缓存命中率可视化图表： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0f9d873f47c48a38d113efd6734f562~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960\&h=352\&s=51236\&e=png\&b=181b1f)

点击展开：缓存命中率可视化图表 Grafana 配置JSON

```json { "datasource": { "uid": "grafanacloud-prom", "type": "prometheus" }, "fieldConfig": { "defaults": { "custom": { "drawStyle": "line", "lineInterpolation": "linear", "barAlignment": 0, "lineWidth": 1, "fillOpacity": 76, "gradientMode": "hue", "spanNulls": true, "insertNulls": false, "showPoints": "auto", "pointSize": 5, "stacking": { "mode": "normal", "group": "A" }, "axisPlacement": "auto", "axisLabel": "", "axisColorMode": "text", "axisBorderShow": false, "scaleDistribution": { "type": "linear" }, "axisCenteredZero": false, "hideFrom": { "tooltip": false, "viz": false, "legend": false }, "thresholdsStyle": { "mode": "off" } }, "color": { "mode": "palette-classic" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "min": 0, "unit": "percentunit" }, "overrides": [ { "matcher": { "id": "byName", "options": "未命中" }, "properties": [ { "id": "color", "value": { "fixedColor": "dark-red", "mode": "fixed" } } ] }, { "matcher": { "id": "byName", "options": "命中缓存 {__name__="cacheHiteRate", hitCache="true", instance="localhost:4001", job="integrations/nodejs"}" }, "properties": [ { "id": "displayName", "value": "命中缓存" } ] }, { "matcher": { "id": "byName", "options": "未命中 {__name__="cacheHiteRate", hitCache="false", instance="localhost:4001", job="integrations/nodejs"}" }, "properties": [ { "id": "displayName", "value": "未命中缓存" } ] } ] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 1 }, "id": 27, "interval": "1m", "options": { "tooltip": { "mode": "multi", "sort": "none" }, "legend": { "showLegend": true, "displayMode": "table", "placement": "right", "calcs": [ "min", "max" ] } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "grafanacloud-prom" }, "refId": "A", "expr": "cacheHiteRate{hitCache="true"}", "range": true, "instant": false, "editorMode": "builder", "legendFormat": "__auto", "useBackend": false, "disableTextWrap": false, "fullMetaSearch": false, "includeNullMetadata": true, "hide": true }, { "datasource": { "type": "prometheus", "uid": "grafanacloud-prom" }, "refId": "B", "expr": "cacheHiteRate{hitCache="false"}", "range": true, "instant": false, "editorMode": "builder", "legendFormat": "__auto", "useBackend": false, "disableTextWrap": false, "fullMetaSearch": false, "includeNullMetadata": true, "hide": true }, { "refId": "C", "datasource": { "type": "__expr__", "uid": "__expr__", "name": "Expression" }, "type": "math", "hide": true, "expression": "$A + $B" }, { "refId": "命中缓存", "type": "math", "hide": false, "expression": "$A / $C" }, { "refId": "未命中", "datasource": { "type": "__expr__", "uid": "__expr__", "name": "Expression" }, "type": "math", "hide": false, "expression": "$B / $C" } ], "title": "缓存命中率", "type": "timeseries" } ```

## 3. 评估优化效果为了评估优化效果，首先，我们要记录优化前的状态，在优化上线前提前上线监控指标，并收集一段时间的指标数据。同时建议在优化上线前持续观察7至15天，从而避免来自生产环境用户的指标数据受到工作日和节假日影响所产生的异常波动。 > 注：Grafana Cloud 的免费用户自带 14 天数据保存时长，超过这一时长的数据会被删除。其次，建议在优化上线1至3个月后回归优化效果，确保优化稳定。如果资源优先级提示这一优化生效，我们应该能观察到首次内容绘制`FCP`和最大内容绘制`LCP`指标有明显的改善，例如下图： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4018f0d7dad4474fa01171746734e18c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1306\&h=725\&s=77454\&e=png\&b=16181d) 观察FCP的评分百分比可视化图，在4月30日优化上线后，评分为优的用户占比从优化前的约50%，大幅提升到了优化后的90%。再观察一段时间这一指标，如果评分优的占比都能稳定在90%，那我们就有理由判定**资源优先级优化显著地加快了页面渲染，改善了用户体验！** 同样的，我们也可以观察**缓存命中率指标**来判断优化效果，例如下图： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75583fe1e4de499b8206fd4d83f6205b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=951\&h=345\&s=37773\&e=png\&b=191c20) 观察上述缓存命中率可视化图，在4月30日优化上线后，缓存命中率从优化前的约40%，大幅提升到了约70%，同样可以佐证我们的优化产生了显著的正向收益。此外，上述指标的变化，也应该能从**页面的加载耗时**等直观表现上观察到显著的变化。我们也可以通过录制优化前后前端应用加载的视频，对比评估优化效果。 ## 小结这一节中，我们首先介绍了四类资源优先级提示的功能和细节： 1. 预取回 Prefetch 2. 预加载 Preload 3. 预连接 Preconnect 4. DNS预取回 DNS-Prefetch 其次，用[resource-hint-generator](https://github.com/JuniorTour/resource-hint-generator)作为示例，演示了快速生成资源优先级提示的代码逻辑。最后，我们学习了使用Grafana可视化图表，验证和评估资源优先级优化效果具体方式。 ## [《前端工程体验优化》](https://juejin.cn/book/7306163555449962533)全书现已发布到掘金小册，欢迎各位朋友交流学习简介：不止性能优化，6000行源码+14类前端优化方案，打造前端体验优化理念，超越传统前端性能优化 1. [你做的前端优化都错了-数据驱动、指标先行](https://juejin.cn/book/7306163555449962533/section/7306163555605151753) 2. [前端优化数据量化必备神器-用户体验数据收集与可视化](https://juejin.cn/book/7306163555449962533/section/7310260645843173428) 3. [光速入门Performance API](https://juejin.cn/book/7306163555449962533/section/7310567914266951695) 4. [2行代码让JS加载耗时减少67%-资源优先级提示](https://juejin.cn/book/7306163555449962533/section/7310260645608292352) 5. [CDN最佳实践：让CDN流量节省10%](https://juejin.cn/book/7306163555449962533/section/7310972582391398452) 6. [CDN最佳实践：验证，量化与评估](https://juejin.cn/book/7306163555449962533/section/7311383488376012835) 7. [超简单的代码模块懒加载：让JS加载体积减少13%](https://juejin.cn/book/7306163555449962533/section/7311224369847107624) 8. [超简单的代码模块懒加载：懒加载常见问题解决方案](https://juejin.cn/book/7306163555449962533/section/7311383802843299855) 9. [代码分割最佳实践：细粒度代码分割(Granular Code Split)](https://juejin.cn/book/7306163555449962533/section/7310996946196365346) 10. [代码分割最佳实践：应用改造示例](https://juejin.cn/book/7306163555449962533/section/7311383850400120884) 11. [前端渲染进化史：用SSR让首次内容绘制耗时（FCP）降低72%](https://juejin.cn/book/7306163555449962533/section/7311362439231045667) 12. [前端渲染进化史：SSR进阶优化](https://juejin.cn/book/7306163555449962533/section/7311742250400022543) 13. [图片加载体积减少20%-自适应选择最优图片格式](https://juejin.cn/book/7306163555449962533/section/7311381196426969140) 14. [GIF体积减少80%-GIF图片优化](https://juejin.cn/book/7306163555449962533/section/7311382916703977506) 15. [万物皆可懒加载-3类通用资源懒加载实现方案](https://juejin.cn/book/7306163555449962533/section/7311382963454181376) 16. [万物皆可懒加载-通用资源懒加载工具库](https://juejin.cn/book/7306163555449962533/section/7311738876849356852) 17. [打包耗时减少43%-现代构建工具的魔力](https://juejin.cn/book/7306163555449962533/section/7311383054818213940) 18. [重构CSS-用CSS In JS解决CSS的诸多痛点](https://juejin.cn/book/7306163555449962533/section/7311264801072955407) 19. [打造技术改进文化-征求意见稿制度RFC](https://juejin.cn/book/7306163555449962533/section/7311383008865419298) 20. [一错不再错-用自动化测试避免功能衰退](https://juejin.cn/book/7306163555449962533/section/7311383707514830900) 小册海报