web性能指标：

• FP (First Paint)
  首次绘制：标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.

• FCP (First Contentful Paint)
  首次内容绘制：标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素.

• LCP (Largest Contentful Paint)
  最大内容渲染 ：代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)

• DCL (DomContentloaded)
  DOM内容加载完毕： 当 HTML 文档被完全加载解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载.

• L (onload)
  静态资源加载完毕后触发

• FMP (First Meaningful Paint)
  首次有效绘制 ：主要元素被加载解析完成时触发。

• CLS (Cumulative Layout Shift)
  衡量视觉稳定性

• FID (First Input Delay)
  首次输入延迟：记录用户和页面进行首次交互操作所花费的时间。

• TTFB (Time to First Byte)
  浏览器接收第一个字节的时间

web-vitals

web-vitals是一个前端工具，由谷歌开发维护，周下载次数：1213360（2021年04月12日），可以使用模块化的方式集成到项目中，也可以在HTML页面中直接添加<script src="web-vitals's cdn path" />脚本，然后后续调用它。 该工具大小仅为4kb左右(version 1.1.1) 。现在默认集成在create-react-app：v4.0.3框架中。它提供的api能帮助我们获取一些web性能指标，在做C端应用的时候可以通过这些指标进行相对应的数据流量分析。

web-vitals提供的Api以及这些Api支持的浏览器有：

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

使用方法：

const reportWebVitals = (reportHandle: any) => {
  import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
    getCLS(reportHandle);
    getFID(reportHandle);
    getFCP(reportHandle);
    getLCP(reportHandle);
    getTTFB(reportHandle);
  });
};

const reportHandle = (message: object) => {
  window.navigator.sendBeacon(
    "//localhost:8181/web/vitals",
    JSON.stringify(message)
  );
};

reportWebVitals(reportHandle);

该利用sendBeacon在页面卸载时，给后端发送一些页面数据，以支撑相关数据分析，达到加载体验优化。