默认情况下,Create React App 包含一个性能中继器,它允许您使用不同的指标来测量和分析应用程序的性能。我们相信这些质量信号对提供出色的网络用户体验至关重要。
-
要测量任何受支持的指标,您只需将一个函数传递给
reportWebVitals函数. -
当任何指标的最终值在页面上完成计算时,将触发此函数。您可以使用它将任何结果记录到控制台或发送到特定端点。
它的里面有:
CLS、FID、FCP、LCP、TTFB。
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):
首字节到达的时间点