判斷用戶輸入的是搜索內容還是請求的URL
如果是搜索內容,地址欄會使用瀏覽器默認的搜索引擎合成帶搜索關鍵字的URL
如果是URL,地址欄會根據規則,合成帶有協議的完整URL
有,直接返回緩存資源給瀏覽器
無,進入下一步網絡請求流程
瀏覽器緩存
本機緩存
hosts主機文件
路由器緩存
ISP DNS緩存
DNS遞歸查詢(可能存在負載均衡導致每次IP不一樣)
構造以太網數據幀的時候需要填寫源MAC地址(就是當前主機的MAC地址)和目的MAC地址(如果不知道目的MAC地址 就要根據ARP協議來進行 MAC學習) 最後根據上面IP地址來確認轉發的端口號
路由器會解析到這個數據報的IP地址 然後將IP地址與其子網掩碼進行 與 操作 得到其網絡號 (NAT機制)
然後在當前路由表中查找 如果找到有匹配的網絡號 對應的該網絡端口號進行轉發
如果沒有找到匹配的就從默認的下一跳錶項繼續轉發 他的生存時間也會減一(默認64)
在正常情況下 總會有路由器認識這個IP地址
ACK也會成爲一個TCP數據報 也會涉及到一系列的上述封裝和分用和路由選擇的過程
解析響應報文的時候會首先重點看其首行 (版本號 狀態碼 狀態碼描述)
響應行返回狀態碼200,請求成功,進入下一步
響應行返回狀態碼301或302,瀏覽器需要重定向到響應頭Location字段的URL地址,重新開始發起請求
響應行返回狀態碼 40xx客戶端錯誤
響應行返回狀態碼 5xx 服務器錯誤
接下來再解析Headers部分 解析body部分
響應頭Content-Type返回值是application/octet-stream,表示返回的數據是字節流類型,瀏覽器會按下載類型來處理,將請求提交給瀏覽器的下載管理器,請求流程結束。
響應頭Content-Type返回值是text/html,表返回的數據是HTML格式,進入下一步
默認情況下,每打開一個新頁面,創建一個新的渲染進程
從一個頁面打開另一個頁面,且兩個頁面在同一站點(同樣的協議和根域名)下,共用一個渲染進程
瀏覽器進程發出「提交文檔」的消息
渲染進程接收到「提交文檔」消息後和網絡進程監理傳輸數據的通道
數據傳輸完成後,渲染進程返回「確認提交」的消息給瀏覽器進程
瀏覽器進程收到「確認提交」消息後更新瀏覽器的頁面狀態,包括安全狀態、地址欄URL、前進後退的歷史狀態和web頁面
頁面解析和子資源加載
構建DOM樹(DOM是保存在內存中瀏覽器可以理解的樹狀結構,可以通過JS進行增刪改查)
樣式計算
把css轉換爲瀏覽器能夠理解的結構——styleSheets
轉換樣式表中的屬性值,使其標準化,例如:
em、rem等單位解析成px
顏色設置解析爲rgb格式
bold、lighter等單次解析成對應的數值
…
計算出DOM樹中每個節點的具體樣式,被保存到ComputedStyle結構內
樣式繼承
樣式層疊
佈局,計算DOM樹中可見元素的幾何位置
創建佈局樹(只包含可見元素)
佈局計算(計算每個可見元素的座標位置)
分層,生成圖層樹
佈局樹的節點不一定有對應的圖層,若沒有,則從屬於父節點的圖層
有明確定位屬性、透明屬性、css濾鏡、剪裁等地方會被創建爲圖層
圖層繪製
把圖層的繪製拆分成很多繪製指令
按照順序把繪製指令組成待繪製列表,提交到合成線程
分塊(頁面很長的時候,可視區域只能看到很小的一部分,合成線程將圖層劃分爲圖塊,優先處理可視區域附近的圖塊,可以減小開銷)
柵格化
將圖塊轉換爲位圖的過程
使用GPU來加速生成,生成的位圖保存在GPU內存中
合成
所有圖塊柵格化後,合成線程生成一個繪製圖塊的命令,提交給瀏覽器進程
瀏覽器接收到命令後將頁面內容繪製到內存中,再將內存顯示在屏幕上