收集web用户的性能数据

使用window.performance收集性能数据,应用于android和ios上的web页面

目前safari只支持 Navigation Timing,所以resource类的entries获取不了,
mark和measure通过usertiming来polyfill
(为了方便,已经把这个项目的文件copy到本项目的polyfill中,用户需要首先加载里面的usertiming.js)

#安装

npm i web-preformance

#api

getMetricsForTiming()

返回timing的性能数据(单位ms),目前返回的数据有:

start: navigationStart,
url: window.location.href,
total: 总耗时(loadEventEnd - navigationStart),
dns: dns lookup 耗时
tcp: connect 耗时
timeToFirstByte: 接受到第一个字节的耗时(responseStart - navigationStart),
domContentLoading: domContentLoadedEventStart - domLoading),
domProcessing: domComplete - domLoading

getMetricsForResource()

返回resource的性能数据,safari下,此项没有意义

requests: 统计发生时,一共多少个资源请求,
domains: 涉及多少域名,
subDomainsOfTdl: 本域名下的子域名个数,
requestsToHost: host一共发起了多少请求,
tldAndSubdomainRequests: host及其子域名一共发起了多少请求,
resources: resources 数组,每个resources的metrics数据:

name: res.name,
domain: res.domain,
fileType: res.fileType,
initiatorType: res.initiatorType,
fileExtension: res.fileExtension,
loadtime: res.loadtime,
isRequestToHost: res.isRequestToHost,
requestStartDelay: res.requestStartDelay,//准备开始request和真正开始之间的耗时
dns: res.dns,
tcp: res.tcp,
ttfb: res.ttfb, // timeToFirstByte
requestDuration: res.requestDuration (responseStart - requestStart)
ssl: res.ssl( connectEnd - currR.secureConnectionStart)

getMarkAndMeasure()

返回调用时的mark和measure类型的entries(getEntryByType),safari下需配和polyfill/usertiming一起使用,并且是模拟值

返回的格式

data:{
marks:[],
measures:[]
}

ready(fn)

有些性能数据,需要window.onload 后才能获取,提供一个简单的借口.注意是onload后,因为执行回调的时候loadEventEnd还没有值,需要一个setTimeout进行延迟执行.

#例子
// 在页面比较前面的位置引入