一、性能指标-----如何更好地评价网站的性能
1、用户体验角度
页面加载总时间：是指从导航开始到页面完全加载完毕所需时间，用户直观感受体现在加载状态的变化。
计算公式：loadTime =LoadEventStart - NavigationStart
白屏时间：指从导航开始到页面开始显示内容为止的时间，计算公式：blankTime =domLoading-NavigationStart
用户可交互时间：指从导航开始到页面可与用户进行交互的时间为止，用户直观感受体现为是否可对页面进行鼠标键盘操作。
计算公式为：interactiveTime =domContentLoadedEventStart-navigationStart
首屏响应时间: 工信部《宽带速率的测试方法用户上网体验》:浏览器显示第一屏页面所消耗的时间，以800x600像素尺寸为标准，从开始加载到浏览器页面显示高度达到600像素且此区域有内容显示的时间。
2、开发者角度
HTML文档加载时间：指主HTML文件从DNS解析到加载完且不包含排队时间和应用服务器响应时间，即包含DNS，TCP建连，Request和Response，计算公式：responseEnd-domainlookupStart-排队时间-应用服务器响应时间。后两个时间需由服务端获取,大约计算公式：htmlLoadTime=responseEnd -domainLookupStart- (responseStart-requestStart)
页面渲染时间：主要是指dom解析和资源下载的时间。计算公式为：renderTime =loadEventStart -
静态资源下载： img、css、js文件下载的完整计时
异步请求时间：ajax请求
二、数据维度----要获得以上性能指标并分析需要采集哪些数据
1、各个性能指标的起止时间戳
HTML页面导航流程
异步路由组件跳转流程
2、分析性能指标的维度：
用户、地域、网络运营商、用户代理、页面来源
三、数据采集方法
1、涉及到的时间API
1.Navigation Timing
规范：Level 1(REC) /Level2(WD)
用途：提供网页导航的完整计时信息
接口：performance.timing或performance.getEntriesByType('navigation')
2.Resource Timing
规范：Level 1(CR)/Level2(WD)
用途：提供静态资源下载和异步请求的完整计时信息
接口：performance.getEntriesByType('resource')、performance.clearResourceTimings()
3.Usering Timing
规范：Level1(REC)/Level2(CR)
用途：时间戳打点工具，打点结果存储于performance
接口：performance.mark()、performance.clearMarks()、performance.measure()、performance.clearMeasures()
4.Performance Timeline
规范：Level1(REC)/Level2(WD)
用途：用于存储和检索以上时间戳的统一接口。
接口：performance.getEntries()、performance.getEntriesByName()、performance.getEntriesByType()
5.High Resolution Time
规范：Level1(REC)/Level2(CR)
用途：时间戳打点工具，直接返回一个高精度时间节点。以导航开始时间为起点进行自递增计时，不受系统时钟偏差或调整的影响，亚毫米级精度。
接口：performance.now()
6.Server Timing-----------------------Level1(WD)
7.Paint Timing------------------------Level1(WD)
8.Frame Timing-----------------------Level1(Note)
9.Long Tasks API---------------------Level1(WD)
2、其他维度指标获取
用户标识：traceId或登录用户名
IP: node端获取
IP获取
function getClientIp (req) {
return req.headers['x-forwarded-for'] ||
req.connection.remoteAddress ||
req.socket.remoteAddress ||
req.connection.socket.remoteAddress
}
地域、网络运营商：第三方服务
用户代理：navigator.userAgent
四.附Navigation Timing各时间节点详细说明
unloadEventStart:如果有前一页面且前一页面与当前页面同源，则值为前一页面unload事件触发的时间节点，否则值为0。
unloadEventEnd：如果有前一页面且前一页面与当前页面同源，则值为前一页面unload事件完成的时间节点，否则值为0。
navigationStart：如果有前一页面且前一页面与当前页面同源，则值等于unloadEventEnd；如果无前一页面，则值为开始创建当前页面的时间节点。
redirectStart：如果有重定向且前一页面与当前页面同源，则值为初始化重定向那一刻的时间；否则值为0。
redirectEnd：如果有重定向且前一页面与当前页面同源，则值为接收到最后一次重定向响应的最后一个字节的时间；否则值为0。
fetchStart:是指在浏览器j将要发起任何请求之前的时间值。如果为get同等请求，会先查找各种缓存，此时返回查找各种缓存的开始时间节点。
domainLookupStart:DNS查询的开始时间节点。如果浏览器没有进行DNS查询（比如使用了缓存），则值等于fetchStart。
domainLookupEnd:DNS查询的结束时间节点。如果浏览器没有进行DNS查询（比如使用了缓存），则值等于fetchStart。
connectStart:建立TCP连接的开始时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket或本地缓存），则值等于domainLookupEnd。
connectEnd:TCP连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket或本地缓存），则值等于domainLookupEnd。
secureConnectionStart:可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。
requestStart:指浏览器开始请求当前文档的时间节点，请求的方式可以是请求服务器、缓存、本地资源等。
responseStart:指浏览器接收到从服务器端（或缓存、本地资源）响应回的第一个字节的时间节点。
responseEnd:指浏览器接收到从服务器端（或缓存、本地资源）响应回的最后一个字节的时间节点，或关闭连接的时间节点。
domLoading:指浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点；
domInteractive:指浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；
domContentLoadedEventStart：指DOMContentLoaded事件触发的时间节点。页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
domContentLoadedEventEnd：代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间。
domComplete:html文档完全解析完毕的时间节点。
loadEventStart:指当前页面onload事件触发的时间节点。
loadEventEnd:指当前页面onload事件完成的时间节点。
网友评论