從輸入網址到頁面載入：PerformanceNavigationTiming
此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記
問題
排序以下 PerformanceNavigationTiming 的事件發生順序
[1] loadEventStart
[2] domComplete
[3] domContentLoadedEventStart
[4] fetchStart
[5] connectEnd
[6] domInteractive這一題在討論的是在瀏覽器上從輸入網址到可以跟網站互動的中間發生了什麼事，應該也是面試熱門問題 (吧？)
PerformanceNavigationTiming
MDN 上面有更詳細的內容，不過我們還是一一的看過去吧
首先，我們可以透過 Performance API 來看到當前網站的各個階段所花費的時間，透過執行 performance.getEntries()[0] 就可以看到
接下來按照順序說明各階段的事件
1. 文件卸載 (Document Unload)
startTime:
開始導航 (navigate) 的時間，值幾乎總為 0。載入新頁面時當前頁面會觸發 unload 事件，如果有未提交的表單的情況會彈出確認視窗，點擊確認後導航流程開始
unloadEventStart/unloadEventEnd
如果前一個文檔與當前文檔同源，這兩個屬性記錄 unload 事件的開始和結束時間。若無前一個頁面或不同源，則回傳 0
2. 重定向 (Redirect)
redirectStart/redirectEnd
如果頁面發生重定向，redirectStart 表示重定向開始時間，redirectEnd 表示結束時間。如果沒有重定向，這兩個值都為 0
redirectCount: 自當前瀏覽環境中最後一次非重定向導航以來的重定向次數
3. 緩存與 DNS 查詢 (Cache & DNS Lookup)
fetchStart
開始檢查瀏覽器本地緩存 (Cache - 強緩存，如果本地緩存過期還有協商緩存過程) 的時間
domainLookupStart/domainLookupEnd
DNS 將域名 (Domain) 解析為 IP 地址的過程。如果從 HTTP 快取/本地資源直接取得結果，這兩個值會等於 fetchStart
4. TCP 連線 (TCP Connection)
connectStart
開始建立 TCP 連線的時間。如果使用持久連接 (Persistent Connection) 或從快取中檢索，則等於 domainLookupEnd
secureConnectionStart
若使用 HTTPS 協議，記錄 TLS/SSL 握手 (Handshake) 開始的時間
connectEnd
連線建立完成時間，包含傳輸連線、TLS 握手及 SOCKS 認證等
5. HTTP 請求與回應 (HTTP Request & Response)
requestStart
向伺服器發送 HTTP 請求 (Request) 的時間，此時會構建請求 header、夾帶 cookie 等
responseStart
收到回應 (Response) 第一個位元組的時間(先接收 Response Headers)
responseEnd
收到最後一個位元組或傳輸連線關閉的時間(再接收回應 Response Body)，以較早發生者為準
6. DOM 處理與渲染 (DOM Processing & Rendering)
以下階段與 document.readyState 屬性的變化緊密相關
domLoading
瀏覽器開始處理 HTML 的時間，此時 document.readyState 設為 "loading"
重要特性: domLoading 可能發生在 responseEnd 之前，因為瀏覽器能夠串流解析 (Stream Parsing) 回應內容
domInteractive
document.readyState 設為 "interactive" 的時間，代表 DOM 結構完成且 HTML 已解析完畢 (Parsed)，但子資源 (Subresources) 如 script、圖片、Stylesheets 仍在載入中
7. DOMContentLoaded 事件 (DOMContentLoaded Event)
domContentLoadedEventStart
觸發 DOMContentLoaded 事件前的時間，此時 HTML 已完全解析，所有延遲的 script (<script defer> 和 <script type="module">) 已下載並執行完畢
domContentLoadedEventEnd
DOMContentLoaded 事件處理器 (Event Handler) 完成的時間
關鍵對應關係: document.readyState 的 "interactive" 狀態與 DOMContentLoaded 事件是等價的
8. Document 完成 (Document Complete)
domComplete
document.readyState 設為 "complete" 的時間，此時 DOM 完全載入，所有子資源(包括延遲 script、圖片、Stylesheets、iframe)都已載入完成，load 事件即將觸發
9. Load 事件 (Load Event)
loadEventStart
當前 Document 的 load 事件開始前的時間
loadEventEnd
load 事件完成的時間。此時頁面資源 (Page Resources) 全部載入完成
duration
此屬性回傳 loadEventEnd 與 startTime 之間的差值，代表整個過程的總耗時 (Total Navigation Time)
答案
[4] [5] [6] [3] [2] [1]
