瀏覽器中輸入一個URL發生什麼

轉自：https://www.jianshu.com/p/c1dfc6caa520

瀏覽器中輸入一個URL發生什麼

在學習前端的過程中經常看到這樣一個問題：當你在瀏覽器中輸入url後發生了什麼？下面是個人學習過程中的總結，供個人複習使用，如有理解不正確或不足的地方希望大家指出。
先上一張腦圖：

瀏覽器中輸入url後發生了什麼

我將該過程分爲了以下六步：

1. DNS域名解析

在瀏覽器DNS緩存中搜索
在操作系統DNS緩存中搜索
讀取系統hosts文件，查找其中是否有對應的ip
向本地配置的首選DNS服務器發起域名解析請求

2. 建立TCP連接

爲了準確地傳輸數據，TCP協議採用了三次握手策略。發送端首先發送一個帶SYN（synchronize）標誌的數據包給接收方，接收方收到後，回傳一個帶有SYN/ACK(acknowledegment)標誌的數據包以示傳達確認信息。最後發送方再回傳一個帶ACK標誌的數據包，代表握手結束。在這過程中若出現問題中斷，TCP會再次發送相同的數據包。
TCP是一個端到端的可靠的面向連接的協議，所以HTTP基於傳輸層TCP協議，不用擔心數據的傳輸的各種問題。

3. 發起HTTP請求

請求方法：

GET:獲取資源
POST:傳輸實體主體
HEAD:獲取報文首部
PUT:傳輸文件
DELETE:刪除文件
OPTIONS:詢問支持的方法
TRACE:追蹤路徑

請求報文：

4. 接受響應結果

狀態碼：

1**：信息性狀態碼
2**：成功狀態碼
200：OK 請求正常處理
204：No Content請求處理成功，但沒有資源可返回
206：Partial Content對資源的某一部分的請求
3**：重定向狀態碼
301：Moved Permanently 永久重定向
302：Found 臨時性重定向
304：Not Modified 緩存中讀取
4**：客戶端錯誤狀態碼
400：Bad Request 請求報文中存在語法錯誤
401：Unauthorized需要有通過Http認證的認證信息
403：Forbidden訪問被拒絕
404：Not Found無法找到請求資源
5**：服務器錯誤狀態碼
500：Internal Server Error 服務器端在執行時發生錯誤
503：Service Unavailable 服務器處於超負載或者正在進行停機維護

響應報文：

5. 瀏覽器解析html

瀏覽器按順序解析html文件，構建DOM樹，在解析到外部的css和js文件時，向服務器發起請求下載資源，若是下載css文件，則解析器會在下載的同時繼續解析後面的html來構建DOM樹，則在下載js文件和執行它時，解析器會停止對html的解析。這便出現了js阻塞問題。
預加載器：
當瀏覽器被腳本文件阻塞時，預加載器（一個輕量級的解析器）會繼續解析後面的html，尋找需要下載的資源。如果發現有需要下載的資源，預加載器在開始接收這些資源。預加載器只能檢索HTML標籤中的URL，無法檢測到使用腳本添加的URL，這些資源要等腳本代碼執行時纔會獲取。
注: 預解析並不改變Dom樹，它將這個工作留給主解析過程
瀏覽器解析css，形成CSSOM樹，當DOM樹構建完成後，瀏覽器引擎通過DOM樹和CSSOM樹構造出渲染樹。渲染樹中包含可視節點的樣式信息（不可見節點將不會被添加到渲染樹中，如：head元素和display值爲none的元素）

值得注意的是，這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，並不會等到所有的html都解析完成之後再去構建和佈局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其餘內容。

6. 瀏覽器佈局渲染

佈局：通過計算得到每個渲染對象在可視區域中的具體位置信息（大小和位置），這是一個遞歸的過程。
繪製：將計算好的每個像素點信息繪製在屏幕上

在頁面顯示的過程中會多次進行Reflow和Repaint操作，而Reflow的成本比Repaint的成本高得多的多。因爲Repaint只是將某個部分進行重新繪製而不用改變頁面的佈局，如：改變了某個元素的背景顏色。而如果將元素的display屬性由block改爲none則需要Reflow。