@zyf2e/monitor-web-performance NPM

性能监控

使用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
  })

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中调用）

参数	类型	描述
markName	string	标记名

参数	类型	描述
markName	string	标记名

参数	类型	描述
markName	string	标记名

字段	字段类型	描述	计算公式	备注
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

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

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

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

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

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

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

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

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

字段	字段类型	描述	备注
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

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