使用window.performance分析頁面效能

weixin_33850890發表於2018-10-22
ORM

1.performance.timing

8521343-c4e067e66ab883ce.png

8521343-20aa046a86f4eaf2.png
  • startTime：有些瀏覽器實現為navigationStart，代表瀏覽器開始unload前一個頁面文件的開始時間節點。
    比如我們當前正在瀏覽baidu.com，在位址列輸入google.com並回車，瀏覽器的執行動作依次為：unload當前文件（即baidu.com）->請求下一文件（即google.com）。navigationStart的值便是觸發unload當前文件的時間節點。
    如果當前文件為空，則navigationStart的值等於fetchStart。
  • redirectStart和redirectEnd：如果頁面是由redirect而來，則redirectStart和redirectEnd分別代表redirect開始和結束的時間節點；
  • fetchStart是指在瀏覽器發起任何請求之前的時間值。在fetchStart和domainLookupStart之間，瀏覽器會檢查當前文件的快取；
  • domainLookupStart和domainLookupEnd分別代表DNS查詢的開始和結束時間節點。如果瀏覽器沒有進行DNS查詢（比如使用了cache），則兩者的值都等於fetchStart；
  • connectStart和connectEnd分別代表TCP建立連線和連線成功的時間節點。如果瀏覽器沒有進行TCP連線（比如使用持久化連線webscoket），則兩者都等於domainLookupEnd；
  • secureConnectionStart：可選。如果頁面使用HTTPS，它的值是安全連線握手之前的時刻。如果該屬性不可用，則返回undefined。如果該屬性可用，但沒有使用HTTPS，則返回0；
  • 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和loadEventEnd分別代表onload事件觸發和結束的時間節點

2. 使用Image物件資料上報

function report(){
 var img = new Image();
 var url=CGI + "?"+param;
 img.onload = img.onerror = function () {
      img.onload = img.onerror = null;
      img = null;
 };
  img.src = url;
}

相關文章