【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);
結果：
兼容性：
