獲取WEB各階段響應時間
阿新 • • 發佈：2018-10-31
【web效能】Web performance 獲取web各個階段響應時間：DNS解析時間、TCP建立連線時間、首頁白屏時間、dom渲染完成時間、頁面onload時間等
準確地測量web應用程式的效能特性是使web應用程式更快的一個重要方面
那麼我們怎麼知道一個網站載入定的時間呢？
我們可以新增時間戳標記
下面的JavaScript顯示了一個簡單的嘗試來度量完全載入頁面所需的時間:
<html> <head> <title>stark wang</title> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> <!- Main page body goes from here. --> </body> </html>
結果：
上面的指令碼計算在執行頭部的第一個JavaScript後加載頁面所需的時間，但是它並沒有給出從伺服器獲取頁面所需的時間，或者頁面的初始化生命週期。
PerformanceNavigationTiming介面
使用以下指令碼得到更多資訊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>stark wang</title> </head> <script> function showNavigationDetails() { // 入口 const [entry] = performance.getEntriesByType("navigation"); // 在控制檯可以看到很多引數 console.table(entry.toJSON()); } </script> <body onload="showNavigationDetails()"> </body> </html>
自己去測試
這個介面省去我們很多時間，不再需要獲取時間戳了
處理模型
引數說明
navigationStart 載入起始時間 redirectStart 重定向開始時間（如果發生了HTTP重定向，每次重定向都和當前文件同域的話，就返回開始重定向的fetchStart的值。其他情況，則返回0） redirectEnd 重定向結束時間（如果發生了HTTP重定向，每次重定向都和當前文件同域的話，就返回最後一次重定向接受完資料的時間。其他情況則返回0） fetchStart 瀏覽器發起資源請求時，如果有快取，則返回讀取快取的開始時間 domainLookupStart 查詢DNS的開始時間。如果請求沒有發起DNS請求，如keep-alive，快取等，則返回fetchStart domainLookupEnd 查詢DNS的結束時間。如果沒有發起DNS請求，同上 connectStart 開始建立TCP請求的時間。如果請求是keep-alive，快取等，則返回domainLookupEnd (secureConnectionStart) 如果在進行TLS或SSL，則返回握手時間 connectEnd 完成TCP連結的時間。如果是keep-alive，快取等，同connectStart requestStart 發起請求的時間 responseStart 伺服器開始響應的時間 domLoading 從圖中看是開始渲染dom的時間，具體未知 domInteractive 未知 domContentLoadedEventStart 開始觸發DomContentLoadedEvent事件的時間 domContentLoadedEventEnd DomContentLoadedEvent事件結束的時間 domComplete 從圖中看是dom渲染完成時間，具體未知 loadEventStart 觸發load的時間，如沒有則返回0 loadEventEnd load事件執行完的時間，如沒有則返回0 unloadEventStart unload事件觸發的時間 unloadEventEnd unload事件執行完的時間
實戰案例
這些引數已經非常詳細，也很精準，稍作處理就可以得出我們需要的一些關鍵數字，如：
DNS解析時間： domainLookupEnd - domainLookupStart
TCP建立連線時間： connectEnd - connectStart
白屏時間： responseStart - navigationStart
dom渲染完成時間： domContentLoadedEventEnd - navigationStart
頁面onload時間： loadEventEnd - navigationStart
let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;
console.log('DNS解析時間:', dnsTime , '\nTCP建立時間:', tcpTime, '\n首屏時間:', firstPaintTime,
'\ndom渲染完成時間:', domRenderTime, '\n頁面onload時間:', loadTime);結果：
相容性：
