web-vitals是什么

web-vitals是Google发起的，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。其可获取三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）。

我们用create-react-app 创建的react 的项目里，就存在web-vitals 的身影，位于 src\index.js 中：

web-vitals 使用

1、通过npm 包的形式使用

import {getLCP, getFID, getCLS} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

2、使用CDN 的形式

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://unpkg.com/web-vitals';
  script.onload = function() {
    // When loading `web-vitals` using a classic script, all the public
    // methods can be found on the `webVitals` global namespace.
    webVitals.getCLS(console.log);
    webVitals.getFID(console.log);
    webVitals.getLCP(console.log);
  }
  document.head.appendChild(script);
}())
</script>

3、通过谷歌插件的形式进行使用（需要科学上网）
下载链接

需要注意的点：

1、并不是所有的情况，都会报告具体的指标
a.如果用户从不与页面交互，则不会报告FID
b.服务端渲染的页面，则不会报告FCP，FID和LCP
2、部分指标会存在 a.每当页面visibilityState更改为hidden时，都应报告CLS
b.使用浏览器前进后退时，会报告 CLS, FCP, FID, LCP
3、报告每一次更改的值

import {getCLS} from 'web-vitals';

// Logs CLS as the value changes.
getCLS(console.log, true);  // 多加一个参数

4、允许只报告变化的量（当前值和上一次报告的值之间的差值）

import {getCLS, getFID, getLCP} from 'web-vitals';

function logDelta({name, id, delta}) {
  console.log(`${name} matching ID ${id} changed by ${delta}`);
}

getCLS(logDelta);
getFID(logDelta);
getLCP(logDelta)

5、性能数据可视化
可以通过发送指标数据到性能数据可视化工具，不过需要谷歌账号，通过谷歌账号去绑定

6、API 的介绍

// 指标名称 name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';

// 当前指标的具体值，毫秒级 value: number;

//当前值和上一次报告的值之间的差值。 //在第一个报告中，“ delta”和“ value”将始终相同。 delta: number;

//代表此特定指标的唯一ID，该ID特定于 //当前页面。分析工具可以使用此ID进行重复数据删除 //为同一个指标发送多个值，或者将多个增量组合在一起//并计算总计。 id: string;

//指标值计算中使用的所有效果条目。 //注意，随着值的更改，条目将添加到数组中。 entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];

7、兼容性：

getCLS(): Chromium,
getFCP(): Chromium, Safari Technology Preview
getFID(): Chromium, Firefox, Safari, Internet Explorer (with the polyfill)
getLCP(): Chromium
getTTFB(): Chromium, Firefox, Safari, Internet Explorer

8、原文地址：github.com/GoogleChrom…

使用 web-vitals 对项目的性能进行测试

web-vitals是什么

web-vitals 使用