前言

在平时开发中，总会想要看看项目的性能情况，所以本文收集十种方案，以供平时复盘使用。

有几个指标需要在本文前了解：

CLS (Cumulative Layout Shift) - 累积布局偏移： CLS 衡量了网页上元素布局变化的稳定性。它是一个0到1之间的分数，其中0表示没有布局变化，1表示最差的布局稳定性。较低的 CLS 分数表示更好的用户体验，因为页面元素不会突然移动或跳动，导致用户误操作。
FID (First Input Delay) - 首次输入延迟： FID 衡量了用户首次与页面互动（例如，点击链接或按钮）后到页面实际响应互动的时间。较低的 FID 表示更快的响应时间，增强了用户体验。
FCP (First Contentful Paint) - 首次内容绘制： FCP 是用户首次看到页面上有实际内容呈现的时间点。这包括文本、图像或其他元素的显示。较短的 FCP 时间通常表示更快的加载速度和更好的用户体验。
FP (First Paint) - 首次绘制： FP 表示浏览器首次绘制像素到屏幕上的时间，通常是指页面的第一个非白色像素点。它是评估页面渲染速度的重要指标。
FMP (First Meaningful Paint) - 首次有意义的内容绘制： FMP 表示页面首次呈现有意义的内容到屏幕上的时间。它反应了用户认为页面有用的内容何时可见，是用户体验的重要组成部分。
LCP (Largest Contentful Paint) - 最大内容绘制： LCP 衡量了用户在页面上看到的最大和最重要的内容元素（例如，主要文章、主要图片）绘制完成的时间。更短的 LCP 时间意味着用户更快地看到页面上最重要的内容。
TTFB (Time to First Byte) - 首字节时间： TTFB 衡量了用户请求网页后，收到来自服务器的第一个字节响应的时间。较短的 TTFB 时间通常表示更快的服务器响应，有助于提高加载速度。
TTI (Time to Interactive) - TTI 表示页面变得可交互的时间，即用户可以与页面进行交互的时间点。较短的 TTI 对于提供良好的用户体验至关重要。
DCL (DOM Content Loaded) - DLC 表示浏览器完成解析DOM树并完成加载页面的时间。它通常用于评估页面脚本的加载性能。

工具和插件：

web-vitals插件

这个方法是要在自己的项目中安装一个web-vitals插件来使用记录。在自己需要的页面引入，也可以写一个公共的文件，例如：公共文件reportWebVitals.ts

import { ReportHandler } from "web-vitals";

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

比如我要在入口文件引入,且只在测试环境观察效果：

if (process.env.NODE_ENV !== "production") {
  import("./reportWebVitals").then((module) => {
    const reportWebVitals = module.default;
    // eslint-disable-next-line no-console
    reportWebVitals(console.log);
  });
}