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
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
