所谓web，就算你我素不相识，也知道志同道合；足不出户，你就会知道世界的大小。在本节中，我们将了解一下用户访问网页的速度和Web应用程序的性能。如何获取这些数据？我们的项目使用PerformanceTiming接口来获取当前页面的时间相关信息。PerformanceTiming可以通过只读属性Performance.timing获取实现该接口的对象。我们先来看一张图。计时API为整个请求的每个阶段提供计时信息。PerformanceTiming.navigationStart是一个unsignedlonglong类型的毫秒数，表示在UNIX时间戳结束时从同一浏览器上下文(unload)中卸载前一个文档。如果没有以前的文件，这个值将与PerformanceTiming.fetchStart相同。PerformanceTiming.unloadEventStart是一个unsignedlonglong类型的毫秒数，代表unload事件抛出时的UNIX时间戳。如果没有之前的文档，或者如果之前的文档，或者需要的重定向之一，不是同源的，这个值将返回0。PerformanceTiming.unloadEventEnd是一个unsignedlonglong毫秒，代表卸载事件的UNIX时间戳，当处理完成。如果没有之前的文档，或者之前的文档，或者需要的重定向之一，不是同源的，这个值会返回0。PerformanceTiming.redirectStart是一个unsignedlonglong毫秒，代表第一个时的UNIX时间戳HTTP重定向开始。如果没有重定向，或者重定向的来源不同，这个值会返回0。PerformanceTiming.redirectEnd是一个unsignedlonglong类型的毫秒数，代表最后一次HTTP重定向完成（即HTTP响应时间在最后一位是直接接收到的）UNIX时间戳。如果没有重定向，或者重定向中有不同的来源，这个值将返回0。PerformanceTiming.fetchStart是一个unsignedlonglong代表浏览器准备好使用HTTP请求获取（fetch）文档的毫秒数UNIX时间戳。这一点将在检查任何应用程序缓存之前。PerformanceTiming.domainLookupStart是一个unsignedlonglong类型的毫秒数，表示域查找开始时的UNIX时间戳。如果使用持久连接，或者信息存储在缓存或本地资源中，则此值将与PerformanceTiming.fetchStart保持一致。PerformanceTiming.domainLookupEnd是一个unsignedlonglong类型的毫秒数，表示域名查找结束的UNIX时间戳。如果使用持久连接，或者信息存储在缓存或本地资源中，则此值将与PerformanceTiming.fetchStart保持一致。PerformanceTiming.connectStart是一个unsignedlonglong类型的毫秒，返回HTTP请求开始发送到服务器时的Unix毫秒时间戳。如果使用持久连接，则返回值等于fetchStart属性的值。PerformanceTiming.connectEnd是一个unsignedlonglong类型的毫秒，返回浏览器和服务器建立连接时的Unix毫秒时间戳。如果建立了持久连接，则返回值等于fetchStart属性的值。连接建立是指所有握手和认证过程结束。PerformanceTiming.secureConnectionStart是一个unsignedlonglong类型的毫秒，返回浏览器和服务器开始安全连接握手时的Unix毫秒时间戳。如果当前网页不需要安全连接，则返回0。PerformanceTiming.requestStart是一个unsignedlonglong毫秒数，当浏览器向服务器发送HTTP请求时（或开始读取本地缓存时）返回Unix毫秒时间戳。PerformanceTiming.responseStart是一个unsignedlonglong类型的毫秒数，当浏览器从服务器接收到第一个字节（或从本地缓存读取）时返回Unix毫秒时间戳。如果发起请求后传输层失败，重新打开连接，则该属性将被计为新请求对应的发起时间。PerformanceTiming.responseEnd是一个unsignedlonglong毫秒数，当浏览器收到（或从本地缓存中读取，或从本地资源中读取）来自服务器的最后一个字节时返回（如果在此之前HTTP连接已经关闭），则返回关闭时的Unix毫秒时间戳）。PerformanceTiming.domLoading是一个unsignedlonglong类型的毫秒，返回当前网页DOM结构开始解析时的Unix毫秒时间戳（即Document.readyState属性变为“loading”时对应的readystatechange事件被触发）。PerformanceTiming.domInteractive是一个unsignedlonglong类型的毫秒数，返回当前网页的DOM结构结束解析并开始加载嵌入资源时的Unix毫秒数（即Document.readyState属性变为“interactive”时对应的readystatechange事件被触发）时间戳。PerformanceTiming.domContentLoadedEventStart是一个unsignedlonglong类型的毫秒，返回解析器发送DOMContentLoaded事件时的Unix毫秒时间戳，即所有需要执行的脚本都已经解析完毕。PerformanceTiming.domContentLoadedEventEnd是一个unsignedlonglong类型的毫秒，当所有需要立即执行的脚本都执行完时（不管执行顺序如何）返回Unix毫秒时间戳。PerformanceTiming.domComplete是一个unsignedlonglong类型的毫秒，返回当前文档解析完成时的Unix毫秒时间戳，即当Document.readyState变为'complete'并触发相应的readystatechange时。PerformanceTiming.loadEventStart是一个unsignedlonglong类型的毫秒数，返回本文件下加载事件发送时的Unix毫秒时间戳。如果事件还没有发送，那么它的值为0。PerformanceTiming.loadEventEnd是一个unsignedlonglong类型的毫秒，返回加载事件结束时的Unix毫秒时间戳，即加载事件完成时。如果事件还没有发送，或者还没有完成，它的值将为0。重点来了！！！看完上面的参数，我们就得到了我们想要的数据源。我们现在要做的就是把数据整理好，变成我们项目中使用的数据。我们将需要收集的时间分为两类：1.Interval阶段耗时DNS解析耗时dns：timing.domainLookupEnd-timing.domainLookupStartTCP连接耗时tcp：timing.connectEnd-timing.connectStartSSL安全连接耗时ssl:timing.connectEnd-timing.secureConnectionStartTimetoFirstByte(TTFB)，网络请求耗时TTFB有多种计算方式，ARMS是基于谷歌开发定义的ttfb:timing.responseStart-timing.requestStart数据传输时间-消耗反式：timing.responseEnd-计时。responseStartDOM解析耗时dom:timing.domInteractive-timing.responseEnd资源加载耗时res:timing.loadEventStart-timing.domContentLoadedEventEnd2.关键性能指标首包时间firstbyte:timing.responseStart-timing.domainLookupStartFirstPaintTime,firstrenderingtime/WhiteScreentimefpt:timing.responseEnd-timing.fetchStartTimetoInteract,第一次交互时间tti:timing.domInteractive-timing.fetchStartHTML加载完成时间，即DOMReady时间ready:timing.domContentLoadedEventEnd-timing。fetchStart页面加载完成时加载：timing.loadEventEnd-timing.fetchStart有了这两部分数据，我们就可以将这些数据上传到我们的后台服务中，是不是很简单，^_^。关于我们收集的数据如何展示，请到（http://hubing.online:8083）查看。真的不懂吗？然后我会附上一些源代码。//MonitorperfletperformanceTime=function(){vartiming=performance.timing;varloadTime=timing.loadEventEnd-timing.navigationStart;//一旦取的太早，loadEventEnd有时会为0if(loadTime<=0){//加载未完成，延迟200ms后继续times方法，直到成功setTimeout(function(){performanceTime();},200);返回;}uploadUserData(1,{//1.IntervalPhase耗时//DNS解析耗时dns:formatTime(timing.domainLookupEnd-timing.domainLookupStart),//TCP连接耗时tcp:formatTime(timing.connectEnd-timing.connectStart),//SSL安全连接耗时ssl:formatTime(timing.connectEnd-timing.secureConnectionStart),//TimetoFirstByte(TTFB),网络请求耗时TTFB有多种计算方式，ARMS基于谷歌开发定义ttfb:formatTime(timing.responseStart-timing.requestStart),//数据传输需要时间trans:formatTime(timing.responseEnd-timing.responseStart),//DOM解析耗时dom:formatTime(timing.domInteractive-timing.responseEnd),//资源加载耗时res:formatTime(timing.loadEventStart-timing.domContentLoadedEventEnd),//2.关键性能指标//首包时间firstbyte:formatTime(timing.responseStart-timing.domainLookupStart),//FirstPaintTime,首渲染时间/白屏时间fpt:formatTime(timing.responseEnd-timing.fetchStart),//TimetoInteract，首次交互时间tti:formatTime(timing.domInteractive-timing.fetchStart),//HTML加载完成时间，即DOMReady时间ready:formatTime(timing.domContentLoadedEventEnd-timing.fetchStart),//页面完成加载时间load:function(){returnformatTime(timing.loadEventEnd-timing.fetchStart);}(),navt:(function(){lettype="";switch(performance.navigation.type){case0:type='NAVIGATE';休息;案例1：type='RELOAD';休息;情况2：type='BACK_FORWARD';休息;案例255：type='RESERVED'；休息;}返回类型；})()});}window.addEventListener("load",function(){performanceTime();});喜欢的话请点个赞或者去https://github.com/kisslove/w...Star或者打赏或者...哈哈，我的想法有点多
