準確地測量web應用程序的性能特性是使web應用程序更快的一個重要方面
參考網址
https://segmentfault.com/a/1190000012833867#articleHeader6
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API
PerformanceNavigationTiming接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>性能優化</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);