性能监控
安装
使用npm
``
bash
npm i @zyf2e/monitor-web-performance
`
使用yarn
`
bash
yarn add @zyf2e/monitor-web-performance
`
使用cdn
`
bash
`
快速开始
`
javascript
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中调用）
指标
$3
字段|字段类型|描述|计算公式|备注
|---|----|----|------|---|
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
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|从导航到浏览器向屏幕呈现第一个像素之间的时间|
$3
字段|字段类型|描述|备注
|---|----|----|---|
value|number|浏览器呈现来自DOM的第一部分内容|
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|视口中可见的最大图像或文本块的渲染时间|
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|首屏加载后所有接口完成请求后的时间|
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|首屏加载后所有接口完成请求后，图片完全加载后的时间|
$3
字段|字段类型|描述|备注
|---|---|----|---|
eventName|string|事件名|
targetCls|string|目标对象类名|
startTime|number|事件触发时间|
delay|number|事件延迟时间|
eventHandleTime|number|事件处理时间|
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|页面元素意外位移量|
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|number|页面刷新率
$3
字段|字段类型|描述|备注
|---|---|----|---|
value|
PerformanceResourceTiming|资源加载瀑布流
$3
字段|字段类型|描述|备注
|---|---|----|---|
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|用户代理字符串
$3
字段|字段类型|描述|备注
|---|---|----|---|
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
$3
字段|字段类型|描述|备注
|---|---|----|---|
deviceMemory|float|设备内存大致数量|单位GB
hardwareConcurrency|number|返回可用于运行在用户的计算机上的线程的逻辑处理器的数量
jsHeapSizeLimit|number|上下文可用的最大内存|单位MB
totalJSHeapSize|number|已分配的内存|单位MB
usedJSHeapSize|number|当前活跃的内存|单位MB