瀏覽器從輸入URL到渲染完頁面的整個過程

從輸入URL到渲染出整個頁面的過程包括三個部分：

1、DNS解析URL的過程

2、瀏覽器發送請求與服務器交互的過程

3、瀏覽器對接收到的html頁面渲染的過程

一、DNS解析URL的過程

      DNS解析的過程就是尋找哪個服務器上有請求的資源。因為ip地址不容易記憶，一般會使用URL域名（如www.baidu.com）作為網址。DNS解析就是將域名翻譯成IP地址的過程。

具體過程：

       1）瀏覽器緩存：瀏覽器會按照一定的頻率 緩存DNS記錄

 　　2）操作系統緩存：如果瀏覽器緩存中找不到需要的DNS記錄，就會取操作系統中找

　　 3）路由緩存：路由器也有DNS緩存

　　 4）ISP的DNS服務器：ISP有專門的DNS服務器應對DNS查詢請求

　　 5）根服務器：ISP的DNS服務器找不到之后，就要向根服務器發出請求，進行遞歸查詢

二、瀏覽器與服務器交互過程

　　1）首先瀏覽器利用tcp協議通過三次握手與服務器建立連接

　　http請求包括header和body。header中包括請求的方式（get和post）、請求的協議 （http、https、ftp）、請求的地址ip、緩存cookie。body中有請求的內容。

　　2）瀏覽器根據解析到的IP地址和端口號發起http的get請求.

　　3）服務器接收到http請求之后，開始搜索html頁面，並使用http返回響應報文

　　4）若狀態碼為200顯示響應成功，瀏覽器接收到返回的html頁面之后，開始進行頁面的渲染

三、瀏覽器頁面渲染過程

　　1）瀏覽器根據深度遍歷的方式把html節點遍歷成dom 樹

　　2）將css解析成CSS DOM樹

　　3）將dom樹和CSS DOM樹構造成render樹

　　4）JS根據得到的render樹 計算所有節點在屏幕中的位置，進行布局（回流）

　　5）遍歷render樹並調用硬件API繪制所有節點（重繪）

     補充： 構造render渲染樹的過程

      

1. 從DOM樹的根節點開始遍歷每個可見的節點。
2. 對於每個可見的節點，找到CSS樹中的對應的規則，並且應用他們。
3. 根據每個可見的節點及其對應的樣式，組合生成渲染樹。

 

 

文章主要參考：

https://blog.csdn.net/zhm0303/article/details/83054179

https://blog.csdn.net/xiaojinguniang/article/details/86544747