從輸入URL到瀏覽器顯示頁面發生了什麼

一、輸入網址

當你開始輸入網址好比www.cnblogs.com時遊覽器就能夠在書籤或者歷史記錄裏面去搜索相關的網址推薦給你。

二、遊覽器查找域名的IP地址

① 請求發起後，遊覽器首先會解析這個域名，首先它會查看本地硬盤的 hosts 文件，看看其中有沒有和這個域名對應的規則，若是有的話就直接使用 hosts 文件裏面的 ip 地址。

② 若是在本地的 hosts 文件沒有可以找到對應的 ip 地址，瀏覽器會發出一個 DNS請求到本地DNS(域名分佈系統)服務器 。本地DNS服務器通常都是你的網絡接入服務器商提供，好比中國電信，中國移動。

③查詢你輸入的網址的DNS請求到達本地DNS服務器以後，本地DNS服務器會首先查詢它的緩存記錄，若是緩存中有此條記錄，就能夠直接返回結果，此過程是遞歸的方式進行查詢。若是沒有，本地DNS服務器還要向DNS根服務器進行查詢

④根DNS服務器沒有記錄具體的域名和IP地址的對應關係，而是告訴本地DNS服務器，你能夠到域服務器上去繼續查詢，並給出域服務器的地址。這種過程是迭代的過程

⑤本地DNS服務器繼續向域服務器發出請求，在這個例子中，請求的對象是.com域服務器。.com域服務器收到請求以後，也不會直接返回域名和IP地址的對應關係，而是告訴本地DNS服務器，你的域名的解析服務器的地址

⑥最後，本地DNS服務器向域名的解析服務器發出請求，這時就能收到一個域名和IP地址對應關係，本地DNS服務器不只要把IP地址返回給用戶電腦，還要把這個對應關係保存在緩存中，以備下次別的用戶查詢時，能夠直接返回結果，加快網絡訪問。

三、創建TCP連接

在拿到域名對應的IP地址後，會以隨機端口（1024~~65535）向WEB服務器程序80端口發起TCP的鏈接請求，這個鏈接請求進入到內核的TCP/IP協議棧（用於識別該鏈接請求，解封包，一層一層的剝開），還有可能要通過Netfilter防火牆（屬於內核的模塊）的過濾，最終到達WEB程序，最終創建了TCP/IP的鏈接，對於客戶端與服務器的TCP連接，必然要說的就是『三次握手』。

　　　　　　　　　　三次握手

客戶端發送一個帶有SYN標誌的數據包給服務端，服務端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息，最後客戶端再回傳一個帶ACK標誌的數據包，表明握手結束，鏈接成功。

通俗化以後就是：

客戶端：老弟我要跟你連接

服務端：好的，贊成了

客戶端：好嘞

四、遊覽器向WEB服務器發起Http請求

創建TCP鏈接以後，發起HTTP請求，請求通常分爲三部分

請求方法URI協議/版本

請求頭(Request Header)

請求正文

下面是一個完整的請求

詳細的就不描述了，網上不少說明的。

 五、服務器端處理

服務器端收到請求後的由web服務器（準確說應該是http服務器）處理請求，諸如Apache、Ngnix、IIS等。web服務器解析用戶請求，知道了須要調度哪些資源文件，再經過相應的這些資源文件處理用戶請求和參數，並調用數據庫信息，最後將結果經過web服務器返回給瀏覽器客戶端。

六、關閉TCP連接

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

上圖能夠通俗化：

客戶端：老弟，我這邊沒數據要傳了，我們關閉連接吧

服務端：好的，接收到了，我看看我這邊還有沒有要傳的

服務端：我這邊也沒有了，關閉吧

客戶端：好嘞

七、遊覽器解析資源

對於獲取到的HTML、CSS、JS、圖片等等資源。

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

在解析CSS的同時，能夠繼續加載解析HTML，但在解析執行JS腳本時，會中止解析後續HTML，這就會出現阻塞問題，關於JS阻塞相關問題，這裏不過多闡述,後面會單獨開篇講解。

　　　　　　　　　　webkit渲染流程

八、遊覽器佈局渲染

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

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

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

有些狀況下，好比修改了元素的樣式，瀏覽器並不會馬上 reflow 或 repaint 一次，而是會把這樣的操做積攢一批，而後作一次 reflow，這又叫異步 reflow 或增量異步 reflow。
有些狀況下，好比 resize 窗口，改變了頁面默認的字體等。對於這些操做，瀏覽器會立刻進行 reflow。

好的，完畢！