在瀏覽器地址欄鍵入URL，按下回車以後會經歷了那些事

每次編程遇到不懂的問題，是否是習慣性的打開www.baidu.com、www.google.com,來解決你遇到的問題，那你知道你在手輸url，並按下回車鍵的時候，都發生了什麼嗎？跟着我一塊兒來看一看吧~~~~

當咱們在瀏覽器輸入網址並回車後，都調用了哪些服務，經歷了哪些步驟，一切都從這裏開始。

一、URL解析

一個URL包括協議，網絡地址，資源路徑

協議：最經常使用的好比HTTP（超文本傳輸協議）FTP（文件傳輸協議）

網絡地址：能夠是域名或者ip地址，包括端口號，若是沒有默認爲80

若是是不合法的地址，會轉給默認的搜索引擎,例如若是你正在使用chrome，能夠在url輸入框輸入你想要搜索的內容，而後搜索引擎會根據關鍵字進行搜索。

二、DNS域名解析

例如：baidu.com就是域名

1.先到各類緩存信息中查找

先到瀏覽器緩存記錄中查找------瀏覽器會緩存DNS一段時間

系統緩存-----若是瀏覽器中沒有找到，瀏覽器會有一個系統調用，得到系統緩存中的記錄

路由器緩存-----接着將請求發給路由器，路由器通常也有本身的DNS緩存

2.DNS服務器查找

沒有則發送請求到本地域名服務器每個本地域名服務器都維護一個高速緩存，存放最近用過的域名及其IP地址.若是尚未則發出遞歸查詢（本地服務器請求比他高一級的服務器，如此遞歸直到根域名服務器，確定能找到這個服務器的IP地址）經過這個IP能夠找到客戶端到服務器端的惟一路徑.

三、瀏覽器主機根據ip地址與服務器創建TCP鏈接

瀏覽器向服務器端發送SYN鏈接請求，通過服務器與瀏覽器三次報文的交互鏈接創建完成，就能夠發送數據了。

找到了正確的IP地址之後就要開始創建鏈接了，創建鏈接的過程通常會使用TCP協議，經過三次握手創建鏈接。

TCP 三次握手

客戶端發出創建鏈接的請求。數據包攜帶有SYN。

若是服務端有開放的端口，能夠接受並創建鏈接，那麼服務端會返回SYN + ACK,告訴客戶端我能夠接受你的請求。

客戶端收到服務端的迴應，發送ACK給服務端。 鏈接創建。

圖文理解：

客戶端：「你好，你的快遞到了，人在家嗎？」

服務端：「在的，送來就行。」

客戶端：「好嘞。」

四、發送HTTP請求

與服務器創建了鏈接後，就能夠向服務器發起請求了

根據HTTP協議的要求，組織一個HTTP數據包，向服務器發送HTTP請求，HTTP的請求報頭有請求行和請求報頭，空行。

在瀏覽器中查看報文首部（以QQ瀏覽器爲例）：

請求行包括請求方法、URI、HTTP版本。首部字段傳遞重要信息，包括請求首部字段、通用首部字段和實體首部字段。咱們能夠從報文中看到發出的請求的具體信息。具體每一個首部字段的做用，這裏不作過多闡述

五、服務器處理請求

服務器收到請求並響應，生成一個HTTP響應報文，經過TCP協議發送給瀏覽器主機

經過HTTP請求服務後，服務器會像瀏覽器返回一個應答信息----------HTTP響應，

在HTTP裏，有請求就會有響應，哪怕是錯誤信息。這裏咱們一樣看下響應報文的組成結構：

在響應結果中都會有個一個HTTP狀態碼，好比咱們熟知的200、30一、40四、500等。經過這個狀態碼咱們能夠知道服務器端的處理是否正常，並能瞭解具體的錯誤。

狀態碼由3位數字和緣由短語組成。根據首位數字，狀態碼能夠分爲五類：

六、斷開TCP鏈接

爲了不服務器與客戶端雙方的資源佔用和損耗，當雙方沒有請求或響應傳遞時，任意一方均可以發起關閉請求。與建立TCP鏈接的3次握手相似，關閉TCP鏈接，須要4次握手。

• 客戶端發起中斷請求，發送FIN到服務端
• 服務端收到請求，可能數據尚未發完。這個時候不會關閉socket，而是回覆ACK，告訴客戶端知道了
• 客戶端進入Fin_Wait狀態，繼續等待服務端端的FIN報文。服務端端發送完畢後，會向客戶端發送FIN
• 客戶端客服端收到後就回復ACK，並關閉鏈接

上圖能夠這麼理解：

• 客戶端：「兄弟，我這邊沒數據要傳了，咱關閉鏈接吧。」
• 服務端：「收到，我看看我這邊有木有數據了。」
• 服務端：「兄弟，我這邊也沒數據要傳你了，咱能夠關閉鏈接了。」
• 客戶端：「好嘞。」

七、瀏覽器解析文件

瀏覽器經過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，而後經過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不一樣，渲染樹中並無head、display爲none等沒必要顯示的節點。

要注意的是，瀏覽器的解析過程並不是是串連進行的，好比在解析CSS的同時，能夠繼續加載解析HTML，但在解析執行JS腳本時，會中止解析後續HTML，這就會出現阻塞問題，關於JS阻塞相關問題，（js阻塞問題能夠自行百度，或者等我有時間更新一篇文章，單獨解釋阻塞）

八、瀏覽器佈局渲染

根據渲染樹佈局，計算CSS樣式，即每一個節點在頁面中的大小和位置等幾何信息。HTML默認是流式佈局的，CSS和js會打破這種佈局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：repaint(重繪)和reflow(迴流)。

repaint：屏幕的一部分重畫，不影響總體佈局，好比某個CSS的背景色變了，但元素的幾何尺寸和位置不變。

reflow： 意味着元件的幾何尺寸變了，咱們須要從新驗證並計算渲染樹。是渲染樹的一部分或所有發生了變化。這就是Reflow，或是Layout。

因此咱們應該儘可能減小reflow和repaint,良好的css規範會減小這種操做,傳送門·CSS書寫規範和順序

最後瀏覽器繪製各個節點，將頁面展現給用戶。

致此輸入url到展示頁面的一個週期就完成了。

想知道更多嗎，快來關注個人公衆號吧！！ 公衆號：qhq1256618908` 掃碼也是能夠的喲~