JavaWeb~在瀏覽器中輸入網址到顯示網頁內容 中間經歷了什麼?

文章目錄

1. 用戶在地址欄中輸入內容

判斷用戶輸入的是搜索內容還是請求的URL
如果是搜索內容,地址欄會使用瀏覽器默認的搜索引擎合成帶搜索關鍵字的URL
如果是URL,地址欄會根據規則,合成帶有協議的完整URL

在這裏插入圖片描述

2. 查找本地瀏覽器緩存是否存有該資源

有,直接返回緩存資源給瀏覽器
無,進入下一步網絡請求流程

3. 瀏覽器解析URL獲取 協議、主機、端口、path

4. 瀏覽器組裝一個HTTP(Get)請求報文

在這裏插入圖片描述

5. DNS解析,獲取請求的IP地址 查找過程如下:

瀏覽器緩存
本機緩存
hosts主機文件
路由器緩存
ISP DNS緩存
DNS遞歸查詢(可能存在負載均衡導致每次IP不一樣)

6. 打開一個Socket與目標IP地址,端口建立TCP連接,三次握手如下

在這裏插入圖片描述

7. 瀏覽器端構建請求行(方法 URL 版本號)、請求頭(Headers)信息,還要把把cookie數據附加到請求頭中(如果瀏覽器此時保存了Cookie字段的話),接下來這個數據報就會被交給傳輸層

8. 傳輸層協議TCP就會把這個數據構造成一個TCP數據報 再交給網絡層

9. 網絡層會根據IP協議將這個TCP數據報構造成一個IP數據報 還有根據數據報的長度以及MTU的限制 考慮是否需要分包 再交給數據鏈路層

10. 數據鏈路層會根據以太網協議將其再構造成一個以太網數據幀 再將其交給物理層

構造以太網數據幀的時候需要填寫源MAC地址(就是當前主機的MAC地址)和目的MAC地址(如果不知道目的MAC地址 就要根據ARP協議來進行 MAC學習) 最後根據上面IP地址來確認轉發的端口號

11. 在物理層會將數據幀轉換二進制bit流最後變成光信號或者電信號進行傳輸

在這裏插入圖片描述

12. 到達一臺路由器的時候 路由器會對這個信號進行解析和分用 (解析到傳輸層就不再解析了)

路由器會解析到這個數據報的IP地址 然後將IP地址與其子網掩碼進行 與 操作 得到其網絡號 (NAT機制)
然後在當前路由表中查找 如果找到有匹配的網絡號 對應的該網絡端口號進行轉發
如果沒有找到匹配的就從默認的下一跳錶項繼續轉發 他的生存時間也會減一(默認64)
在正常情況下 總會有路由器認識這個IP地址

  • 如果當前路由器不認識該IP地址 路由器會對這個數據報進行封裝 和前述過程一樣 最後還是變成光信號或者電信號傳輸

13. 中間經歷若干路由器轉發最終會到達目標服務器

14. 服務器的物理層將光信號轉成二進制bit流 交給數據鏈路層

15. 數據鏈路層解析其中的IP數據報 再交給網絡層

16. 網絡層可能需要重新組包(因爲前面可能由於IP數據報太打對其進行了拆包) 再交給傳輸層

17. 傳輸層對TCP數據報進行解析 將應用層的數據報交給應用程序 返回ACK應答(此處可能會涉及到確認序號 窗口大小 延遲應答 捎帶應答)

ACK也會成爲一個TCP數據報 也會涉及到一系列的上述封裝和分用和路由選擇的過程
在這裏插入圖片描述

18. 服務器的應用程序讀取數據 然後請求計算響應 (計算過程由程序員敲代碼決定) 結果會得到一個html頁面 將這個頁面構造成一個HTTP的響應報文 這個報文也同樣會經過一系列的封裝 解析分用 傳輸 直到到達客戶端

在這裏插入圖片描述

19. 客戶端的瀏覽器接收HTTP響應,然後根據情況選擇關閉TCP連接或者保留重用,關閉TCP連接的四次揮手如下:

在這裏插入圖片描述

20. 瀏覽器接收到響應信息後進行解析

解析響應報文的時候會首先重點看其首行 (版本號 狀態碼 狀態碼描述)
響應行返回狀態碼200,請求成功,進入下一步
響應行返回狀態碼301或302,瀏覽器需要重定向到響應頭Location字段的URL地址,重新開始發起請求
響應行返回狀態碼 40xx客戶端錯誤
響應行返回狀態碼 5xx 服務器錯誤
接下來再解析Headers部分 解析body部分

21. 響應數據類型處理

響應頭Content-Type返回值是application/octet-stream,表示返回的數據是字節流類型,瀏覽器會按下載類型來處理,將請求提交給瀏覽器的下載管理器,請求流程結束。
響應頭Content-Type返回值是text/html,表返回的數據是HTML格式,進入下一步

22. 準備渲染進程

默認情況下,每打開一個新頁面,創建一個新的渲染進程
從一個頁面打開另一個頁面,且兩個頁面在同一站點(同樣的協議和根域名)下,共用一個渲染進程

23. 提交文檔(響應體數據)

瀏覽器進程發出「提交文檔」的消息
渲染進程接收到「提交文檔」消息後和網絡進程監理傳輸數據的通道
數據傳輸完成後,渲染進程返回「確認提交」的消息給瀏覽器進程
瀏覽器進程收到「確認提交」消息後更新瀏覽器的頁面狀態,包括安全狀態、地址欄URL、前進後退的歷史狀態和web頁面

24. 渲染階段

頁面解析和子資源加載
構建DOM樹(DOM是保存在內存中瀏覽器可以理解的樹狀結構,可以通過JS進行增刪改查)
樣式計算
把css轉換爲瀏覽器能夠理解的結構——styleSheets
轉換樣式表中的屬性值,使其標準化,例如:
em、rem等單位解析成px
顏色設置解析爲rgb格式
bold、lighter等單次解析成對應的數值

計算出DOM樹中每個節點的具體樣式,被保存到ComputedStyle結構內
樣式繼承
樣式層疊
佈局,計算DOM樹中可見元素的幾何位置
創建佈局樹(只包含可見元素)
佈局計算(計算每個可見元素的座標位置)
分層,生成圖層樹
佈局樹的節點不一定有對應的圖層,若沒有,則從屬於父節點的圖層
有明確定位屬性、透明屬性、css濾鏡、剪裁等地方會被創建爲圖層
圖層繪製
把圖層的繪製拆分成很多繪製指令
按照順序把繪製指令組成待繪製列表,提交到合成線程
分塊(頁面很長的時候,可視區域只能看到很小的一部分,合成線程將圖層劃分爲圖塊,優先處理可視區域附近的圖塊,可以減小開銷)
柵格化
將圖塊轉換爲位圖的過程
使用GPU來加速生成,生成的位圖保存在GPU內存中
合成
所有圖塊柵格化後,合成線程生成一個繪製圖塊的命令,提交給瀏覽器進程
瀏覽器接收到命令後將頁面內容繪製到內存中,再將內存顯示在屏幕上

25. 頁面生成完成後,渲染進程會發送消息給瀏覽器進程

26. 瀏覽器進程收到消息後,停止標籤圖標的loading加載動畫,一個完整的頁面就生成了

在這裏插入圖片描述