欢迎光临
技术人生-雨巷前端

利用window.performance.timing进行性能分析

window.performance.timing中相关属性语义:

.navigationStart    // 准备加载页面的起始时间
.unloadEventStart   // 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
.unloadEventEnd     // 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
.redirectStart      // 如果有重定向,这里是重定向开始的时间.
.redirectEnd        // 如果有重定向,这里是重定向结束的时间.
.fetchStart         // 开始检查缓存或开始获取资源的时间
.domainLookupStart  // 开始进行dns查询的时间
.domainLookupEnd    // dns查询结束的时间
.connectStart       // 开始建立连接请求资源的时间
.connectEnd         // 建立连接成功的时间.
.secureConnectionStart  // 如果是https请求.返回ssl握手的时间
.requestStart       // 开始请求文档时间(包括从服务器,本地缓存请求)
.responseStart      // 接收到第一个字节的时间
.responseEnd        // 接收到最后一个字节的时间.
.domLoading         // ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
.domInteractive     // 文档解析结束的时间
.domContentLoadedEventStart   // DOMContentLoaded事件开始的时间
.domContentLoadedEventEnd    // DOMContentLoaded事件结束的时间
.domComplete        // current document readiness被设置 complete的时间
.loadEventStart     // 触发onload事件的时间
.loadEventEnd       // onload事件结束的时间

主要性能分析指标

一般指标:

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

实际前端更关注的指标(需要在实际中结合自身代码):

//在最后一张图出来的时候打时间点
console.log('首屏图片加载完成 : ',window.lastImgLoadTime - window.performance.timing.navigationStart);
//在HTML后打时间点
console.log('HTML加载完成 : ',window.loadHtmlTime - window.performance.timing.navigationStart);
//在首屏的接口打时间点
console.log('首屏接口完成加载完成 : ',Report.SPEED.MAINCGI - window.performance.timing.navigationStart);
//在所有接口打时间点
console.log('接口完成加载完成 : ',Report.SPEED.LASTCGI - window.performance.timing.navigationStart);

实际输出:

911587-20171217204842218-1842894507

未经允许不得转载:技术人生 » 利用window.performance.timing进行性能分析

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我是前端,我不迷茫