“在瀏覽器里各拷，從輸入 URL 到頁面展示刁绒，這中間發(fā)生了什么？ ”這是一道經(jīng)典的面試題烤黍。涉及到一系列的知識考察：網(wǎng)絡(luò)知市、操作系統(tǒng)、Web 等速蕊。
- 瀏覽器進(jìn)程接收到用戶輸入的 URL 請求嫂丙，瀏覽器進(jìn)程便將該 URL 轉(zhuǎn)發(fā)給網(wǎng)絡(luò)進(jìn)程。
- 在網(wǎng)絡(luò)進(jìn)程中發(fā)起真正的 URL 請求规哲。
- 網(wǎng)絡(luò)進(jìn)程接收到了響應(yīng)頭數(shù)據(jù)跟啤，便解析響應(yīng)頭數(shù)據(jù)，并將數(shù)據(jù)轉(zhuǎn)發(fā)給瀏覽器進(jìn)程唉锌。
- 瀏覽器進(jìn)程接收到網(wǎng)絡(luò)進(jìn)程的響應(yīng)頭數(shù)據(jù)之后隅肥，發(fā)送“提交導(dǎo)航 (CommitNavigation)”消息到渲染進(jìn)程
- 渲染進(jìn)程接收到“提交導(dǎo)航”的消息之后，便開始準(zhǔn)備接收 HTML 數(shù)據(jù)袄简，接收數(shù)據(jù)的方式是直接和網(wǎng)絡(luò)進(jìn)程建立數(shù)據(jù)管道武福。
- 最后渲染進(jìn)程會向瀏覽器進(jìn)程“確認(rèn)提交”，這是告訴瀏覽器進(jìn)程：“已經(jīng)準(zhǔn)備好接受和解析頁面數(shù)據(jù)了”痘番。
-
瀏覽器進(jìn)程接收到渲染進(jìn)程“提交文檔”的消息之后，便開始移除之前舊的文檔平痰，然后更新瀏覽器進(jìn)程中的頁面狀態(tài)汞舱。
從輸入 URL 到頁面展示完整流程示意圖
用戶發(fā)出 URL 請求到頁面開始解析的這個過程，就叫做導(dǎo)航宗雇。
從輸入URL到頁面展示
一. 用戶輸入
用戶在地址欄輸入查詢關(guān)鍵字后昂芜，地址欄會判斷輸入的是搜索內(nèi)容還是請求的URL
-
搜索內(nèi)容：地址欄會使用瀏覽器默認(rèn)的搜索引擎來合成新的帶搜索關(guān)鍵字的URL。如在谷歌瀏覽器地址欄輸入
大山赔蒲，回車泌神，會看到地址欄的URL變?yōu)?br>https://www.google.com/search?q=大山&oq=大山 -
輸入內(nèi)容符合URL規(guī)則：地址欄會根據(jù)規(guī)則良漱，在前面加上協(xié)議合成完整的URL，如：在谷歌瀏覽器地址欄輸入
baidu.com欢际，回車母市，會看到地址欄的URL變?yōu)?code>https://www.baidu.com/
瀏覽器開始加載一個地址后，標(biāo)簽頁上的圖標(biāo)會變成
loading损趋，但頁面還是顯示之前的頁面內(nèi)容患久，因為需要等待提交文檔階段，頁面內(nèi)容才會被替換浑槽。
二. URL請求過程
網(wǎng)絡(luò)進(jìn)程會查找本地緩存是否緩存了該資源
- 有緩存資源：直接返回資源給瀏覽器進(jìn)程
- 沒有緩存資源：直接進(jìn)入網(wǎng)絡(luò)請求流程
網(wǎng)絡(luò)請求流程步驟：
- 進(jìn)行DNS解析蒋失，獲取到請求域名服務(wù)器的IP地址
- 利用IP地址和服務(wù)器建立TCP連接
- TCP連接建立之后，構(gòu)建請求行桐玻、請求頭等信息篙挽，并把和該域名相關(guān)的Cookie等數(shù)據(jù)附加到請求頭中
- 向服務(wù)器發(fā)送構(gòu)建的請求信息
- 服務(wù)器根據(jù)請求信息生成響應(yīng)數(shù)據(jù)，包括響應(yīng)行镊靴、響應(yīng)頭和響應(yīng)體等信息铣卡，并把響應(yīng)數(shù)據(jù)發(fā)給網(wǎng)絡(luò)進(jìn)程
- 網(wǎng)絡(luò)進(jìn)程解析響應(yīng)頭
6.1. 如果響應(yīng)頭中的狀態(tài)碼是301/302，網(wǎng)絡(luò)進(jìn)程會讀取響應(yīng)行中的Location字段并發(fā)起新的URL請求
6.2. 如果響應(yīng)頭中的狀態(tài)碼是200邑闲，網(wǎng)絡(luò)進(jìn)程告訴瀏覽器一切正常算行，可以繼續(xù)往下處理該請求了。
如果響應(yīng)頭中的狀態(tài)碼是200苫耸，會繼續(xù)解析Content-Type字段
6.2.1. 如果返回的值標(biāo)識是一個下載文件州邢，則該請求會被提交給瀏覽器的下載管理器，URL請求的導(dǎo)航流程就此結(jié)束褪子。
6.2.2. 如果返回的值標(biāo)識是一個HTML文件量淌，瀏覽器會繼續(xù)進(jìn)行導(dǎo)航流程，即網(wǎng)絡(luò)進(jìn)程會把響應(yīng)頭數(shù)據(jù)轉(zhuǎn)發(fā)給瀏覽器進(jìn)程嫌褪。
三. 準(zhǔn)備渲染進(jìn)程
- 默認(rèn)情況下呀枢，Chrome會為每個頁面分配一個渲染進(jìn)程。
- 如果從A頁面打開了B頁面笼痛，而B頁面和A頁面屬于同一站點的話裙秋，那么B頁面會復(fù)用A頁面的渲染進(jìn)程。官方把這個默認(rèn)策略叫 process-per-site-instance缨伊。
渲染進(jìn)程準(zhǔn)備好之后摘刑，還不能立即進(jìn)入文檔解析狀態(tài)，因為此時的文檔數(shù)據(jù)還在網(wǎng)絡(luò)進(jìn)程中刻坊，并沒有提交給渲染進(jìn)程枷恕，所以下一步就進(jìn)入了提交文檔階段。
四. 提交文檔
所謂的提交文檔谭胚，是指瀏覽器進(jìn)程將網(wǎng)絡(luò)進(jìn)程接收到的HTML數(shù)據(jù)提交給渲染進(jìn)程徐块。
- 瀏覽器進(jìn)程接收到網(wǎng)絡(luò)進(jìn)程的響應(yīng)頭數(shù)據(jù)后未玻，便向渲染進(jìn)程發(fā)起“提交文檔”的消息
- 渲染進(jìn)程接收到“提交文檔”的消息后，會和網(wǎng)絡(luò)進(jìn)程建立傳輸數(shù)據(jù)的“管道”
- 文檔傳輸完成后胡控，渲染進(jìn)程返回“確認(rèn)提交”消息給瀏覽器進(jìn)程
- 瀏覽器進(jìn)程接收到“確認(rèn)提交”的消息后扳剿，會更新瀏覽器的狀態(tài)，包括安全狀態(tài)铜犬、地址欄的URL舞终、前進(jìn)后退的歷史狀態(tài)，并更新Web頁面癣猾。
導(dǎo)航完成狀態(tài)
這也解釋了為什么在瀏覽器地址欄輸入一個URL后敛劝，原頁面沒有立馬消失，而是要加載一會才更新頁面纷宇。
至此夸盟，一個完整的導(dǎo)航流程就走完了，之后就進(jìn)入渲染階段
渲染過程涵蓋了從用戶發(fā)起請求到提交文檔給渲染進(jìn)程的中間所有階段像捶。
五. 渲染階段
文檔被提交上陕，渲染進(jìn)程便開始頁面解析和子資源加載。渲染流程參考下一篇文章拓春。
文章內(nèi)容參考極客時間 李兵老師的瀏覽器工作原理與實踐課程释簿。
