從按下url到渲染頁面流程圖

處理輸入資訊

檢查用戶輸入

當用戶在地址欄中輸入一個查詢關鍵字時，地址欄會判斷輸入的關鍵字是搜索內容，還是請求的 URL。如果是搜索內容，地址欄會使用瀏覽器默認的搜索引擎，來合成新的帶搜索關鍵字的 URL。如果判斷輸入內容符合 URL 規則，比如輸入的是 time.geekbang.org，那麼地址欄會根據規則，把這段內容加上協議，合成為完整的 URL

beforeunload事件

當用戶輸入關鍵字並鍵入回車之後，這意味著當前頁面即將要被替換成新的頁面，不過在這個流程繼續之前，瀏覽器還給了當前頁面一次執行 beforeunload 事件的機會，beforeunload 事件允許頁面在退出之前執行一些數據清理操作，還可以詢問用戶是否要離開當前頁面，比如當前頁面可能有未提交完成的表單等情況，因此用戶可以通過 beforeunload 事件來取消導航，讓瀏覽器不再執行任何後續工作。

瀏覽器進入載入狀態

當瀏覽器剛開始載入一個地址之後，標籤頁上的圖標便進入了載入狀態。但此時圖中頁面顯示的依然是之前打開的頁面內容，並沒立即替換為極客時間的頁面。因為需要等待提交文檔階段，頁面內容才會被替換。

URL 請求過程

發送到網路進程

瀏覽器進程會通過進程間通訊（IPC）把 URL 請求發送至網路進程。

檢查快取

網路進程會查找本地快取是否快取了該資源。如果有快取資源，那麼直接返回資源給瀏覽器進程(瀏覽器快取中的強制快取)，若無快取，則直接進入網路請求流程。

DNS解析

對URL進行DNS 解析(DNS)，以獲取請求域名的伺服器 IP 地址和埠號。如果沒有埠號，http默認80，https默認443如果請求協議是 HTTPS，那麼還需要建立 TLS 連接。

通過TCP三次握手建立連接

進入 TCP 隊列（單個域名 TCP 連接數量限制）,通過三次握手機制與伺服器建立連接。Chrome 有個機制，同一個域名同時最多只能建立 6 個TCP 連接，如果在同一個域名下同時有 10 個請求發生，那麼其中 4 個請求會進入排隊等待狀態，直至進行中的請求完成。如果當前請求數量少於6個，會直接建立TCP連接。

發送請求

瀏覽器端會構建請求行（方法、URL、協議）、請求頭等資訊，並把和該域名相關的 Cookie 等數據附加到請求頭中，然後向伺服器發送構建的請求資訊。

• http請求加上TCP頭部——包括源埠號、目的程式埠號和用於校驗數據完整性的序號，向下傳輸
•  網路層在數據包上加上IP頭部——包括源IP地址和目的IP地址，繼續向下傳輸
• 底層通過物理網路傳輸給目的伺服器主機

伺服器響應

伺服器接收到請求資訊後，會根據請求資訊生成響應數據（包括響應行、響應頭和響應體等資訊），並發給網路進程。

• 伺服器主機網路層接收到數據包，解析出IP頭部，識別出數據部分，將解開的數據包向上傳輸到傳輸層
• 伺服器主機傳輸層獲取到數據包，解析出TCP頭部，識別埠，將解開的數據包向上傳輸到應用層
• 應用層HTTP解析請求頭和請求體，如果需要重定向，HTTP直接返回HTTP響應數據的狀態code301或者302，同時在請求頭的Location欄位中附上重定向地址，瀏覽器會根據code和Location進行重定向操作；如果不是重定向，首先伺服器會根據 請求頭中的If-None-Match 的值來判斷請求的資源是否被更新，如果沒有更新，就返回304狀態碼，相當於告訴瀏覽器之前的快取還可以使用，就不返回新數據了；否則，返回新數據，200的狀態碼，並且如果想要瀏覽器快取數據的話，就在相應頭中加入欄位：Cache-Control:Max-age=2000。

響應數據又順著應用層-傳輸層-網路層-網路介面層-網路介面層-網路層-傳輸層-應用層的順序返回到網路進程。(OSI模型)

是否斷開連接

數據傳輸完成，TCP四次揮手斷開連接。如果，瀏覽器或者伺服器在HTTP頭部加上Connection:Keep-Alive，TCP就一直保持連接。保持TCP連接可以省下次需要建立連接的時間，提升資源載入速度。

解析響應頭

• 重定向

在接收到伺服器返回的響應頭後，網路進程開始解析響應頭，如果發現返回的狀態碼是 301 或者 302，那麼說明伺服器需要瀏覽器重定向到其他 URL。這時網路進程會從響應頭的 Location 欄位裡面讀取重定向的地址，然後再發起新的 HTTP 或者 HTTPS 請求，一切重新開始。如果響應行是 200，那麼表示瀏覽器可以繼續處理該請求。

• 響應數據類型處理

瀏覽器會根據HTTP 頭中Content-Type欄位來判斷伺服器返回的響應體數據是什麼類型並根據類型決定如何顯示響應體的內容。如果 Content-Type 欄位的值被瀏覽器判斷為下載類型，那麼該請求會被提交給瀏覽器的下載管理器，同時該 URL 請求的導航流程就此結束。但如果是 HTML，網路進程則會通知瀏覽器進程準備渲染進程進行渲染

準備渲染進程

準備渲染進程

瀏覽器進程檢查當前URL是否和之前打開的渲染進程根域名是否相同，如果相同則復用原來的進程，如果不同則開啟新的渲染進程。

提交文檔

瀏覽器會發出’提交文檔’的消息給渲染進程，渲染進程接收到消息後，會和網路進程建立傳輸數據的’管道’，文檔數據傳輸完成之後，渲染進程會返回「確認提交」的消息給瀏覽器進程；（文檔指的是URL 請求的響應體）

⚠️ :網路進程向渲染進程提交文檔，是邊下載邊傳遞給渲染進程解析的，接收到第一批數據，便開始做DOM解析了！即提交文檔後便開始進行解析DOM，解析CSS，生成布局樹，繪製等操作。

更新瀏覽器介面狀態

瀏覽器進程在收到「確認提交」的消息後，會更新瀏覽器介面狀態，包括了安全狀態、地址欄的 URL、前進後退的歷史狀態，並更新 Web 頁面。此時的web頁面是空白頁。

渲染文檔

渲染進程對文檔進行頁面解析和子資源載入，HTML 通過HTML解析器轉成DOM Tree，CSS按照CSS 規則和CSS解釋器轉成CSSOM TREE，兩個tree結合，形成render tree（不包含HTML的具體元素和元素要畫的具體位置），通過Layout可以計算出每個元素具體的寬高顏色位置，結合起來，開始繪製，最後顯示在螢幕中新頁面顯示出來。具體的渲染流程下篇渲染流程在詳細分析

瀏覽器工作原理與實踐

Chrome官網 //developers.google.com/web/updates/2018/09/inside-browser-part2#a_simple_navigation