@zyf2e/monitor-web-performance

性能监控

安装

使用npm

npm i @zyf2e/monitor-web-performance

使用yarn

yarn add @zyf2e/monitor-web-performance

使用cdn

<script src="https://cdn.jsdelivr.net/npm/@mitojs/web/dist/web-performance.min.js"></script>

快速开始

 let wv = new MITO.WebVitals({
    appId: 'allen-test',
    version: '1.0.0',
    reportCallback: console.log,
    immediately: true
  })

API

• constructor

  属性	类型	描述	是否必填	默认值
  appId	string	应用标识	否	无
  version	string	应用版本号	否	无
  reportCallback	上报回调函数	function	是	无
  reportUri	string	提供给sendBeacon使用	否	无
  immediately	boolean	是否立即上报	否	false
  isCustomEvent	boolean	是否自定义触发事件	否	false，pageshow触发，自定义触发需要在需要的位置调用customContentfulPaint
  logFpsCount	boolean	监听fps的次数	否	无
  maxWaitCCPDuration	number	最大等待ccp时间	否	30*1000

• getCurrentMetrics

  返回当前所有指标的对象，指标名称：navigation-timing、first-paint、first-contentful-paint、largest-contentful-paint、first-input-delay、resource-flow、fps， 自定义指标返回 {customMetrics}Metrics

• setStartMark

  描述：自定义开始标志，用于测量自定义指标

  参数	类型	描述
  markName	string	标记名

• setEndMark

  描述：自定义结束标志，用于测量自定义指标，返回当前自定义指标数据，并清除当前标志

  参数	类型	描述
  markName	string	标记名

• clearMark

  描述：清除当前已定义的标志

  参数	类型	描述
  markName	string	标记名

• customCompletedPaint

  描述：测量自定义渲染的指标，返回自定义渲染指标数据（在页面接口完成后调用；vue项目，可以是根组件App.vue的mounted中，或者vue router的beforeResolve中调用； react项目， 可以在页面组件外的高阶组件中componentDidMount中调用）

指标

NavigationTiming

字段	字段类型	描述	计算公式	备注
dnsLookup	number	DNS查询耗时	domainLookupEnd - domainLookupStart
initial connection	number	TCP连接耗时	connectEnd - connectStart
SSL	number	SSL安全连接耗时	connectEnd - secureConnectionStart	只在HTTPS下有效。
ttfb	number	请求响应耗时	responseStart - requestStart	https://developer.chrome.com/docs/devtools/network/reference/#timing
content download	number	内容传输耗时	responseEnd - responseStart
dom parse	number	DOM解析耗时	domInteractive - responseEnd
resource download	number	资源加载耗时	loadEventStart - domContentLoadedEventEnd
dom Ready	number	DOM完成加载	domContentLoadedEventEnd - fetchStart
page load	number	页面完全加载	loadEventStart - fetchStart

FP

字段	字段类型	描述	备注
value	number	从导航到浏览器向屏幕呈现第一个像素之间的时间

FCP

字段	字段类型	描述	备注
value	number	浏览器呈现来自DOM的第一部分内容

LCP

字段	字段类型	描述	备注
value	number	视口中可见的最大图像或文本块的渲染时间

ACT

字段	字段类型	描述	备注
value	number	首屏加载后所有接口完成请求后的时间

CCP

字段	字段类型	描述	备注
value	number	首屏加载后所有接口完成请求后，图片完全加载后的时间

FID

字段	字段类型	描述	备注
eventName	string	事件名
targetCls	string	目标对象类名
startTime	number	事件触发时间
delay	number	事件延迟时间
eventHandleTime	number	事件处理时间

CLS

字段	字段类型	描述	备注
value	number	页面元素意外位移量

FPS

字段	字段类型	描述	备注
value	number	页面刷新率

Resource Flow

字段	字段类型	描述	备注
value	PerformanceResourceTiming	资源加载瀑布流

Page Info

字段	字段类型	描述	备注
host	DOMString	域名,可能带有端口号
hostname	DOMString	域名
href	DOMString	整个URL
protocol	DOMString	URL协议
origin	DOMString	页面来源的域名
port	DOMString	端口号
pathname	DOMString	URL路径部分，以'/'开头
search	DOMString	URL参数，以'?'开头
hash	DOMString	URL标识，以'#'开头
userAgent	DOMString	用户代理字符串

Network Info

字段	字段类型	描述	备注
downlink	double	有效带宽	单位Mbps
effectiveType	string	连接类型	slow-2g、2g、3g、4g
rtt	number	来回通信延迟	https://zh.wikipedia.org/wiki/%E4%BE%86%E5%9B%9E%E9%80%9A%E8%A8%8A%E5%BB%B6%E9%81%B2

Device Info

字段	字段类型	描述	备注
deviceMemory	float	设备内存大致数量	单位GB
hardwareConcurrency	number	返回可用于运行在用户的计算机上的线程的逻辑处理器的数量
jsHeapSizeLimit	number	上下文可用的最大内存	单位MB
totalJSHeapSize	number	已分配的内存	单位MB
usedJSHeapSize	number	当前活跃的内存	单位MB