利用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事件結束的時間

 

1.主要性能分析指標

一般指標：

// 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); //在最后一張圖出來的時候打時間點
console.log('HTML加載完成 : ',window.loadHtmlTime - window.performance.timing.navigationStart);//在HTML后打時間點
console.log('首屏接口完成加載完成 : ',Report.SPEED.MAINCGI - window.performance.timing.navigationStart);//在首屏的接口打時間點
console.log('接口完成加載完成 : ',Report.SPEED.LASTCGI - window.performance.timing.navigationStart);//在所有接口打時間點

實際輸出：