從按下url到渲染頁(yè)面流程圖

處理輸入信息

檢查用戶輸入

當(dāng)用戶在地址欄中輸入一個(gè)查詢關(guān)鍵字時(shí)，地址欄會(huì)判斷輸入的關(guān)鍵字是搜索內(nèi)容，還是請(qǐng)求的 URL。如果是搜索內(nèi)容，地址欄會(huì)使用瀏覽器默認(rèn)的搜索引擎，來合成新的帶搜索關(guān)鍵字的 URL。如果判斷輸入內(nèi)容符合 URL 規(guī)則，比如輸入的是 time.geekbang.org，那么地址欄會(huì)根據(jù)規(guī)則，把這段內(nèi)容加上協(xié)議，合成為完整的 URL

beforeunload事件

當(dāng)用戶輸入關(guān)鍵字并鍵入回車之后，這意味著當(dāng)前頁(yè)面即將要被替換成新的頁(yè)面，不過在這個(gè)流程繼續(xù)之前，瀏覽器還給了當(dāng)前頁(yè)面一次執(zhí)行 beforeunload 事件的機(jī)會(huì)，beforeunload 事件允許頁(yè)面在退出之前執(zhí)行一些數(shù)據(jù)清理操作，還可以詢問用戶是否要離開當(dāng)前頁(yè)面，比如當(dāng)前頁(yè)面可能有未提交完成的表單等情況，因此用戶可以通過 beforeunload 事件來取消導(dǎo)航，讓瀏覽器不再執(zhí)行任何后續(xù)工作。

瀏覽器進(jìn)入加載狀態(tài)

當(dāng)瀏覽器剛開始加載一個(gè)地址之后，標(biāo)簽頁(yè)上的圖標(biāo)便進(jìn)入了加載狀態(tài)。但此時(shí)圖中頁(yè)面顯示的依然是之前打開的頁(yè)面內(nèi)容，并沒立即替換為極客時(shí)間的頁(yè)面。因?yàn)樾枰却峤晃臋n階段，頁(yè)面內(nèi)容才會(huì)被替換。

URL 請(qǐng)求過程

發(fā)送到網(wǎng)絡(luò)進(jìn)程

瀏覽器進(jìn)程會(huì)通過進(jìn)程間通信（IPC）把 URL 請(qǐng)求發(fā)送至網(wǎng)絡(luò)進(jìn)程。

檢查緩存

網(wǎng)絡(luò)進(jìn)程會(huì)查找本地緩存是否緩存了該資源。如果有緩存資源，那么直接返回資源給瀏覽器進(jìn)程(瀏覽器緩存中的強(qiáng)制緩存)，若無緩存，則直接進(jìn)入網(wǎng)絡(luò)請(qǐng)求流程。

DNS解析

對(duì)URL進(jìn)行DNS 解析(DNS)，以獲取請(qǐng)求域名的服務(wù)器 IP 地址和端口號(hào)。如果沒有端口號(hào)，http默認(rèn)80，https默認(rèn)443如果請(qǐng)求協(xié)議是 HTTPS，那么還需要建立 TLS 連接。

通過TCP三次握手建立連接

進(jìn)入 TCP 隊(duì)列（單個(gè)域名 TCP 連接數(shù)量限制）,通過三次握手機(jī)制與服務(wù)器建立連接。Chrome 有個(gè)機(jī)制，同一個(gè)域名同時(shí)最多只能建立 6 個(gè)TCP 連接，如果在同一個(gè)域名下同時(shí)有 10 個(gè)請(qǐng)求發(fā)生，那么其中 4 個(gè)請(qǐng)求會(huì)進(jìn)入排隊(duì)等待狀態(tài)，直至進(jìn)行中的請(qǐng)求完成。如果當(dāng)前請(qǐng)求數(shù)量少于6個(gè)，會(huì)直接建立TCP連接。

發(fā)送請(qǐng)求

瀏覽器端會(huì)構(gòu)建請(qǐng)求行（方法、URL、協(xié)議）、請(qǐng)求頭等信息，并把和該域名相關(guān)的 Cookie 等數(shù)據(jù)附加到請(qǐng)求頭中，然后向服務(wù)器發(fā)送構(gòu)建的請(qǐng)求信息。

• http請(qǐng)求加上TCP頭部——包括源端口號(hào)、目的程序端口號(hào)和用于校驗(yàn)數(shù)據(jù)完整性的序號(hào)，向下傳輸
• 網(wǎng)絡(luò)層在數(shù)據(jù)包上加上IP頭部——包括源IP地址和目的IP地址，繼續(xù)向下傳輸
• 底層通過物理網(wǎng)絡(luò)傳輸給目的服務(wù)器主機(jī)

服務(wù)器響應(yīng)

服務(wù)器接收到請(qǐng)求信息后，會(huì)根據(jù)請(qǐng)求信息生成響應(yīng)數(shù)據(jù)（包括響應(yīng)行、響應(yīng)頭和響應(yīng)體等信息），并發(fā)給網(wǎng)絡(luò)進(jìn)程。

• 服務(wù)器主機(jī)網(wǎng)絡(luò)層接收到數(shù)據(jù)包，解析出IP頭部，識(shí)別出數(shù)據(jù)部分，將解開的數(shù)據(jù)包向上傳輸?shù)絺鬏攲?/li>
• 服務(wù)器主機(jī)傳輸層獲取到數(shù)據(jù)包，解析出TCP頭部，識(shí)別端口，將解開的數(shù)據(jù)包向上傳輸?shù)綉?yīng)用層
• 應(yīng)用層HTTP解析請(qǐng)求頭和請(qǐng)求體，如果需要重定向，HTTP直接返回HTTP響應(yīng)數(shù)據(jù)的狀態(tài)code301或者302，同時(shí)在請(qǐng)求頭的Location字段中附上重定向地址，瀏覽器會(huì)根據(jù)code和Location進(jìn)行重定向操作；如果不是重定向，首先服務(wù)器會(huì)根據(jù) 請(qǐng)求頭中的If-None-Match 的值來判斷請(qǐng)求的資源是否被更新，如果沒有更新，就返回304狀態(tài)碼，相當(dāng)于告訴瀏覽器之前的緩存還可以使用，就不返回新數(shù)據(jù)了；否則，返回新數(shù)據(jù)，200的狀態(tài)碼，并且如果想要瀏覽器緩存數(shù)據(jù)的話，就在相應(yīng)頭中加入字段：Cache-Control:Max-age=2000。

響應(yīng)數(shù)據(jù)又順著應(yīng)用層-傳輸層-網(wǎng)絡(luò)層-網(wǎng)絡(luò)接口層-網(wǎng)絡(luò)接口層-網(wǎng)絡(luò)層-傳輸層-應(yīng)用層的順序返回到網(wǎng)絡(luò)進(jìn)程。(OSI模型)

是否斷開連接

數(shù)據(jù)傳輸完成，TCP四次揮手?jǐn)嚅_連接。如果，瀏覽器或者服務(wù)器在HTTP頭部加上Connection:Keep-Alive，TCP就一直保持連接。保持TCP連接可以省下次需要建立連接的時(shí)間，提升資源加載速度。

解析響應(yīng)頭

• 重定向

在接收到服務(wù)器返回的響應(yīng)頭后，網(wǎng)絡(luò)進(jìn)程開始解析響應(yīng)頭，如果發(fā)現(xiàn)返回的狀態(tài)碼是 301 或者 302，那么說明服務(wù)器需要瀏覽器重定向到其他 URL。這時(shí)網(wǎng)絡(luò)進(jìn)程會(huì)從響應(yīng)頭的 Location 字段里面讀取重定向的地址，然后再發(fā)起新的 HTTP 或者 HTTPS 請(qǐng)求，一切重新開始。如果響應(yīng)行是 200，那么表示瀏覽器可以繼續(xù)處理該請(qǐng)求。

• 響應(yīng)數(shù)據(jù)類型處理

瀏覽器會(huì)根據(jù)HTTP 頭中Content-Type字段來判斷服務(wù)器返回的響應(yīng)體數(shù)據(jù)是什么類型并根據(jù)類型決定如何顯示響應(yīng)體的內(nèi)容。如果 Content-Type 字段的值被瀏覽器判斷為下載類型，那么該請(qǐng)求會(huì)被提交給瀏覽器的下載管理器，同時(shí)該 URL 請(qǐng)求的導(dǎo)航流程就此結(jié)束。但如果是 HTML，網(wǎng)絡(luò)進(jìn)程則會(huì)通知瀏覽器進(jìn)程準(zhǔn)備渲染進(jìn)程進(jìn)行渲染

準(zhǔn)備渲染進(jìn)程

準(zhǔn)備渲染進(jìn)程

瀏覽器進(jìn)程檢查當(dāng)前URL是否和之前打開的渲染進(jìn)程根域名是否相同，如果相同則復(fù)用原來的進(jìn)程，如果不同則開啟新的渲染進(jìn)程。

提交文檔

瀏覽器會(huì)發(fā)出'提交文檔'的消息給渲染進(jìn)程，渲染進(jìn)程接收到消息后，會(huì)和網(wǎng)絡(luò)進(jìn)程建立傳輸數(shù)據(jù)的'管道'，文檔數(shù)據(jù)傳輸完成之后，渲染進(jìn)程會(huì)返回“確認(rèn)提交”的消息給瀏覽器進(jìn)程；（文檔指的是URL 請(qǐng)求的響應(yīng)體）

? :網(wǎng)絡(luò)進(jìn)程向渲染進(jìn)程提交文檔，是邊下載邊傳遞給渲染進(jìn)程解析的，接收到第一批數(shù)據(jù)，便開始做DOM解析了！即提交文檔后便開始進(jìn)行解析DOM，解析CSS，生成布局樹，繪制等操作。

更新瀏覽器界面狀態(tài)

瀏覽器進(jìn)程在收到“確認(rèn)提交”的消息后，會(huì)更新瀏覽器界面狀態(tài)，包括了安全狀態(tài)、地址欄的 URL、前進(jìn)后退的歷史狀態(tài)，并更新 Web 頁(yè)面。此時(shí)的web頁(yè)面是空白頁(yè)。

渲染文檔

渲染進(jìn)程對(duì)文檔進(jìn)行頁(yè)面解析和子資源加載，HTML 通過HTML解析器轉(zhuǎn)成DOM Tree，CSS按照CSS 規(guī)則和CSS解釋器轉(zhuǎn)成CSSOM TREE，兩個(gè)tree結(jié)合，形成render tree（不包含HTML的具體元素和元素要畫的具體位置），通過Layout可以計(jì)算出每個(gè)元素具體的寬高顏色位置，結(jié)合起來，開始繪制，最后顯示在屏幕中新頁(yè)面顯示出來。具體的渲染流程下篇渲染流程在詳細(xì)分析

瀏覽器工作原理與實(shí)踐

Chrome官網(wǎng) https://developers.google.com/web/updates/2018/09/inside-browser-part2#a_simple_navigation