性能優化篇 - 連接是如何解析的

前言

互聯網時代，咱們天天都會在網上查看不少的內容：購物、新聞、娛樂、生活等衣食住行的一系列事情，那爲何咱們輸入一個網址，就能夠打開對應的內容，這個過程是怎麼實現的，還有，做爲一個開發，我想讓用戶在最短的時間內最快的打開個人網站，我須要作哪些事情，無論是資源壓縮、合併等一系列操做，都是在加載到資源的時候，纔會涉及到的性能問題，那麼，咱們怎麼在加載到資源前知道瀏覽器都作了什麼，經過知道瀏覽器都作了什麼，咱們能夠深層次的去分析存在的問題，並去作相應的優化，把用戶體驗提高到極致。

先上圖

navigationStart: 在同一個瀏覽器上下文中，前一個網頁（與當前頁面不必定同域）unload 的時間戳，若是無前一個網頁 unload ，則與 fetchStart 值相等

unloadEventStart: 前一個網頁（與當前頁面同域）unload 的時間戳，若是無前一個網頁 unload 或者前一個網頁與當前頁面不一樣域，則值爲 0

unloadEventEnd: 和 unloadEventStart 相對應，返回前一個網頁 unload 事件綁定的回調函數執行完畢的時間戳

redirectStart: 第一個 HTTP 重定向發生時的時間。有跳轉且是同域名內的重定向纔算，不然值爲 0

redirectEnd: 最後一個 HTTP 重定向完成時的時間。有跳轉且是同域名內部的重定向纔算，不然值爲 0

fetchStart: 瀏覽器準備好使用 HTTP 請求抓取文檔的時間，這發生在檢查本地緩存以前

domainLookupStart: DNS 域名查詢開始的時間，若是使用了本地緩存（即無 DNS 查詢）或持久鏈接，則與 fetchStart 值相等

domainLookupEnd: DNS 域名查詢完成的時間，若是使用了本地緩存（即無 DNS 查詢）或持久鏈接，則與 fetchStart 值相等

connectStart: HTTP（TCP） 開始創建鏈接的時間，若是是持久鏈接，則與 fetchStart 值相等

注意: 若是在傳輸層發生了錯誤且從新創建鏈接，則這裏顯示的是新創建的鏈接開始的時間

secureConnectionStart: HTTPS 鏈接開始的時間，若是不是安全鏈接，則值爲 0

connectEnd: HTTP（TCP） 完成創建鏈接的時間（完成握手），若是是持久鏈接，則與 fetchStart 值相等

注意: 若是在傳輸層發生了錯誤且從新創建鏈接，則這裏顯示的是新創建的鏈接完成的時間;這裏握手結束，包括安全鏈接創建完成、SOCKS 受權經過

requestStart: HTTP 請求讀取真實文檔開始的時間（完成創建鏈接），包括從本地讀取緩存;鏈接錯誤重連時，這裏顯示的也是新創建鏈接的時間

responseStart: HTTP 開始接收響應的時間（獲取到第一個字節），包括從本地讀取緩存

responseEnd: HTTP 響應所有接收完成的時間（獲取到最後一個字節），包括從本地讀取緩存

domLoading: 開始解析渲染 DOM 樹的時間，此時 Document.readyState 變爲 loading，並將拋出 readystatechange 相關事件

domInteractive: 完成解析 DOM 樹的時間，Document.readyState 變爲 interactive，並將拋出 readystatechange 相關事件

注意: 只是 DOM樹解析完成，這時候並無開始加載網頁內的資源

domContentLoadedEventStart: DOM 解析完成後，網頁內資源加載開始的時間;在 DOMContentLoaded 事件拋出前發生

domContentLoadedEventEnd: DOM 解析完成後，網頁內資源加載完成的時間（如 JS 腳本加載執行完畢）

domComplete: DOM 樹解析完成，且資源也準備就緒的時間，Document.readyState 變爲 complete，並將拋出 readystatechange 相關事件

loadEventStart: load事件發送給文檔，也即load回調函數開始執行的時間

注意: 若是沒有綁定 load 事件，值爲 0

loadEventEnd: load 事件的回調函數執行完畢的時間

在前面的內容中，屢次提到了傳輸層，傳輸層其實就是OSI模型當中的一個層，一共有7層，前端通常涉及到的是5層，若是想要具體瞭解一下的朋友，請跳這裏：OSI七層模型與TCP/IP五層模型

總結

上面呢，基本上就是歸納了瀏覽器從輸入網址到dom渲染後的整個過程，裏面一部份內容是經過向網上的大佬學習總結的，若是不足的地方，還請各位補充，我會及時改進。