React 脚手架新增reportWebVitals(衡量绩效)

162 阅读1分钟

默认情况下,Create React App 包含一个性能中继器,它允许您使用不同的指标来测量和分析应用程序的性能。我们相信这些质量信号对提供出色的网络用户体验至关重要。

  • 要测量任何受支持的指标,您只需将一个函数传递给reportWebVitals 函数.

  • 当任何指标的最终值在页面上完成计算时,将触发此函数。您可以使用它将任何结果记录到控制台或发送到特定端点。

它的里面有:CLSFIDFCPLCPTTFB

LCP (Largest Contentful Paint):

最大内容渲染时间:指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件(最大可见内容通常是图片或者视频,或者大块的文本)

FID (First Input Delay首次输入延迟):

首次输入延迟:指的是从用户首次与网页互动(点击链接、按钮等)到浏览器响应此次互动直接的时间。用于判断网页进入互动状态的时间。

CLS (Cumulative Layout Shift) :

得分范围0-1,指的是网页布局在加载期间的偏移量,0表示没有偏移,1表示最大偏移,这个指标指示用户与网站的交互体验,如果网址在加载过程布局一直跳动,用户体验会很差。比如加载一张图片,但没有大小空白占位,导致图片显示时页面高度跳动。

FCP(First Contentful Paint):

首次内容绘制,标记浏览器渲染来自 DOM 第一位内容的时间点,内容可能是文本、图像等元素。

TTFB (Time to First Byte):

首字节到达的时间点