前端性能检测 Performance

September_九月
162 阅读4分钟

image.png 一、各字段的含义如下:

  1. startTime startTime:有些浏览器实现为 navigationstart，代表浏览器开始unload前一个页面文档的开始时间节点，比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationstart的值便是触发unload当前文档的时间节点。 如果当前文档为空，则navigationStart的值等于fetchStart。 2.redirectStart和redirectÉndredirectStart 积redirectEnd:如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点:
  2. unloadEventStart和unloadEventEnd unloadEventStart 积 unloadEventEnd:如果前一个文档和请求的文档是同一个域的，则unloadEventstart 和 unloadEventEnd 分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;
  3. fetchStart fetchstart 是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupstart 之间，浏览器会检查当前文档的缓存;
  4. domainLookupStart和domainLookupEnd domainLookupstart 和 domainLookupEnd 分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache)，则两者的值都等于fetchstart;
  5. connectStart和connectEnd connectstart 和 connectEnd 分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如便用持久化连接webscoket)，则两者都等于domainLookupEnd;
  6. secureConnectionStart secureConnectionstart:可选。如果页面使用HTTPS，它的值是安全连接掘手之前的时刻，如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0:
  7. requestStart requeststart 代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等;
  8. responseStartresponsestart 和 responseEnd 分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;
  9. domLoading domLoading,代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readystate 属性，domLoading 的值就等于readyState改变为loading的时间节点;
  10. dominteractive domInteractive 代表浏览器解析htm|文档的状态为interactive 时的时间节点。domInteractive 并非DOMReady，它早于DOMReady触发，代表html文档解析完毕(即domtree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;
  11. domContentLoadedEventStart domContentLoadedEventStart:代表 DOMContentLoaded事件触发的时间节点:页面文档究全加载并解析究毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框塑页面的加载(1ad事件可以用来检测HTML页面是否完全加完毕(fully-loaded))。
  12. domContentLoadedEventEnd domContentLoadedEventEnd:代表 D0McontentLoaded 事件完成的时间节点，此刻用户可以对页而进行操作，也就是jQuery中的domready时间;
  13. domComplete domComplete:html文档完全解析完毕的时间节点;
  14. loadEventStart和loadEventEnd loadEventStart和loadEventEnd 分别代表onload事件触发和结束的时间节点

二、可以使用 Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间domready等等。如下: ·DNS查询耗时=domainLookupEnd.domainLookupStart ·TCP链接耗时=connectEnd-connectStart ·request请求耗时=responseEnd-responseStart 解析dom树耗时=domComplete-domInteractive 白屏时间=domloadng .fetchStart domready时间=domContentloadedEventEnd .fetchStart onload时间=loadEventEnd .fetchStart

所以根据上面的时间点，我们可以计算常规的性能值，如下:(使用该api时需要在页面完全加载完成之后才能便用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。)

var timing=window.performance 8& window.performance.timing;
var navigation=window.performance 8& window.performance.navigation;
//重定向次数:
var redirectCount=navigation 8& navigation.redirectCount;
//跳转耗时:
var redirect=timing.redirectEnd - timing.redirectStart;
//APP CACHE 耗时:
var appcache =Math.max(timing.domainlookupStart - timing.fetchStart, 0);
//DNS 解析耗时:
var dns=timing.domainLookupEnd -timing.domainLookupStart;
//TCP 链接耗时:
var con=timing.connectEnd -timing.connectStart;
//等待服务器响应耗时(注意是否存在cache):
var request=timing.responseStart-timing.requestStart;
//内容加载耗时(注意是否存在cache):
var response=timing.responseEnd-timing.responseStart;
//总体网络交互耗时，即开始跳转到服务器资源下载完成:
var network=timing.responseEnd-timing.navigationStart;
//渲染处理:
var processing"(timing.domComplete||timing.domloading)- timing.domloading;
//抛出 1oad 事件:
var load =timing.loadEventEnd .timing.loadEventStart;
//总耗时:
var total =(timing.loadEventEnd || timing.loadEventStart || timing.domcomplete || timing.domloading||timing.responseEnd||timing.responseStart||timing.connectEnd||timing.domainLookupEnd||timing.domainlookupStart||timing.redirectEnd||)-(timing.redirectStart||timing.fetchStart||timing.domainLookupStart||timing.connectStart||timing.requestStart||timing.responseStart||timing.navigationStart||timing.domloading)
//可交互:
var active=timing.domInteractive-timing.navigationStart;
//请求响应耗时，即T0，注意cache:
var t0=timing.responseStart -timing.navigationStart;
//首次出现内容，即 T1:
var t1=timing.domloading-timing.navigationStart;
//内容加载完毕，即 T3:
var t3=timing.loadEventEnd-timing.navigationStart;
2.2.3 Resource timing APl

三、Resource timing API Resource timing API是用来统计静态资源相关的时间信息，详细的内容请参考 www.w3.org/TR/resource… 这里我们只介绍 performance.getEntries方法，它可以获取页面中每个静态资源的请求 performance.getEntries返回一个数组，数组的每个元素代表对应的静态资源的信息.

avatar
文章
阅读
粉丝