我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在使用create-react-app创建的默认模版中,存在着一个很神秘的reportWebVitals函数。那么,这个很神秘的WebVital是干什么的呢?本文就对这个WebVital究竟是什么,做个深入探讨。

苏南大叔:create-react-app项目,如何理解用户体验指标WebVital? - WebVital
create-react-app项目,如何理解用户体验指标WebVital?(图4-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。webVitalGoogle提出的检测用户体验的标准,可以用于解答页面加载速度/用户体验的问题。测试环境:win10chrome@104.0.5112.81create-react-app@5.0.1

测试代码

其实就是使用create-react-app生成一个默认的模版,里面就自带这个webVital功能。当然,在redux系列的默认模版中,也存在着这个功能。

先初始化一个npm项目:

npm init

然后初始化一个react模版项目:

create-react-app my-app

或者初始化一个redux的模版项目:

create-react-app my-app --template redux

这样就可以获得这个WebVital的测试用例了。参考文章:

核心代码

代码前提是:已经安装了web-vitals,本文中的版本号是2.1.4。如果您不是使用create-react-app初始化的话,可能还需要执行命令:

npm i web-vitals --save

苏南大叔:create-react-app项目,如何理解用户体验指标WebVital? - reportWebVitals
create-react-app项目,如何理解用户体验指标WebVital?(图4-2)

文件src/reportWebVitals.js:

const reportWebVitals = onPerfEntry => {
  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;

注意,这里的import('web-vitals')字样。

苏南大叔:create-react-app项目,如何理解用户体验指标WebVital? - reportWebVitals(console
create-react-app项目,如何理解用户体验指标WebVital?(图4-3)

src/index.js文件:

import reportWebVitals from './reportWebVitals';
//...
reportWebVitals();

注意,最后的reportWebVitals()函数,需要进行一下修改才能正常使用。需要传递进去一个函数,函数用于处理结果。默认推荐传入console.log。直接就可以打印查看了,当然也可以根据实际情况自定义函数逻辑。

import reportWebVitals from './reportWebVitals';
//...
reportWebVitals(console.log);

执行结果

这个webVitalGoogle提出的一个检测用户体验的标准,这些指标包含三个关键指标(CLSFIDLCP)和两个辅助指标(FCPTTFB)。但是,这五个指标并不是一下子就会执行得出结果的。是有特定条件才能触发的。

苏南大叔:create-react-app项目,如何理解用户体验指标WebVital? - 运行结果
create-react-app项目,如何理解用户体验指标WebVital?(图4-4)

这个结果中,主要看value值,对应的单位是毫秒。

FCPTTFP

默认情况下,页面加载完毕,就会出现FCPTTFP两个辅助指标。

  • FCP(First Contentful Paint)首次内容绘制,标记浏览器渲染来自 DOM 第一位内容的时间点,内容可能是文本、图像等元素。
  • TTFB (Time to First Byte) 首字节到达的时间点。

LCPFID

对页面进行交互的时候,会出现LCPFID指标。

  • LCP (Largest Contentful Paint):最大内容渲染时间:指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件(最大可见内容通常是图片或者视频,或者大块的文本)
  • FID (First Input Delay):首次输入延迟:指的是从用户首次与网页互动(点击链接、按钮等)到浏览器响应此次互动直接的时间。用于判断网页进入互动状态的时间。

CLS

浏览器tab切换的时候,会出现最后一个指标:CLS

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

相关文章

综述

本文的例子,文章分类上按理说应该归属前端js范畴,但是功能上来说,放置在seo分类里面,似乎更加高大上应景一些。您说是不?

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   seo    react