地址欄裏輸入URL,到頁面呈現的過程

這是我參與更文挑戰的第9天，活動詳情查看： 更文挑戰

這是一個大機率會考的面試問題

瀏覽器的輸入URL到頁面呈現的大致過程：

• 輸入地址，發送至DNS服務器，獲取相應的域名和web服務器的IP地址
• 與web服務器創建TCP連接
• 瀏覽器向web服務器發送HTTP請求
• 服務器響應請求,併發送對應的數據
• 瀏覽器下載數據,並解析源文件,渲染頁面,呈現頁面
• 關閉TCP連接

過程詳解：

輸入url後，首先須要找到這個url域名的服務器ip,爲了尋找這個ip，瀏覽器首先會尋找緩存，查看緩存中是否有記錄。

緩存的查找記錄爲：瀏覽器緩存-》系統緩存-》路由器緩存，緩存中沒有則查找系統的hosts文件中是否有記錄，若是沒有則查詢DNS服務器。

獲得服務器的ip地址後，瀏覽器根據這個ip以及相應的端口號，構造一個http請求，這個請求報文會包括此次請求的信息，主要是請求方法，請求說明和請求附帶的數據，並將這個http請求封裝在一個tcp包中。

這個tcp包會依次通過傳輸層，網絡層，數據鏈路層，物理層到達服務器，服務器解析這個請求來做出響應，返回相應的html給瀏覽器。由於html是一個樹形結構，瀏覽器根據這個html來構建DOM樹。

在dom樹的構建過程當中若是遇到JS腳本和外部JS鏈接，則會中止構建DOM樹來執行和下載相應的代碼，這會形成阻塞，這就是爲何推薦JS代碼應該放在html代碼的後面。

以後根據外部樣式，內部樣式，內聯樣式構建一個CSS對象模型樹CSSOM樹，構建完成後和DOM樹合併爲渲染樹，這裏主要作的是排除非視覺節點，好比script，meta標籤和排除display爲none的節點，以後進行佈局，佈局主要是肯定各個元素的位置和尺寸。

下來是渲染頁面，由於html文件中會含有圖片，視頻，音頻等資源，在解析DOM的過程當中，遇到這些都會進行並行下載，瀏覽器對每一個域的並行下載數量有必定的限制，通常是4-6個。

頁面加載完畢。

補充

在這些全部的請求中咱們還須要關注的就是緩存，緩存通常經過Cache-Control、Last-Modify、Expires等首部字段控制。

Cache-Control和Expires的區別在於Cache-Control使用相對時間，Expires使用的是基於服務器 端的絕對時間，由於存在時差問題，通常採用Cache-Control。

在請求這些有設置了緩存的數據時，會先查看是否過時，若是沒有過時則直接使用本地緩存，過時則請求並在服務器校驗文件是否修改。

若是上一次響應設置了ETag值會在此次請求的時候做爲If-None-Match的值交給服務器校驗，若是一致，繼續校驗 Last-Modified，沒有設置ETag則直接驗證Last-Modified，再決定是否返回304。