在瀏覽器輸入URL回車以後發生了什麼

大體流程

1. URL 解析
2. DNS 查詢
3. TCP 鏈接
4. 處理請求
5. 接受響應
6. 渲染頁面

1、URL 解析

2、DNS 查詢

1. 瀏覽器緩存

瀏覽器會先檢查是否在緩存中，沒有則調用系統庫函數進行查詢。

2. 操做系統緩存

操做系統也有本身的 DNS緩存，但在這以前，會向檢查域名是否存在本地的 Hosts 文件裏，沒有則向 DNS 服務器發送查詢請求。

3. 路由器緩存

路由器也有本身的緩存。

4. ISP DNS 緩存

ISP DNS 就是在客戶端電腦上設置的首選 DNS 服務器，它們在大多數狀況下都會有緩存。

3、TCP 鏈接

1. 應用層：發送 HTTP 請求

在前面的步驟咱們已經獲得服務器的 IP 地址，瀏覽器會開始構造一個 HTTP 報文，其中包括：

• 請求報頭（Request Header）：請求方法、目標地址、遵循的協議等等
• 請求主體（其餘參數）

其中須要注意的點：

• 瀏覽器只能發送 GET、POST 方法，而打開網頁使用的是 GET 方法

2. 傳輸層：TCP 傳輸報文

傳輸層會發起一條到達服務器的 TCP 鏈接，爲了方便傳輸，會對數據進行分割（以報文段爲單位），並標記編號，方便服務器接受時可以準確地還原報文信息。

在創建鏈接前，會先進行 TCP 三次握手。

「

關於 TCP/IP 三次握手，網上已經有不少段子和圖片生動地描述了。

相關知識點：

1. SYN 泛洪攻擊

」

3. 網絡層：IP協議查詢Mac地址

將數據段打包，並加入源及目標的IP地址，而且負責尋找傳輸路線。

判斷目標地址是否與當前地址處於同一網絡中，是的話直接根據 Mac 地址發送，不然使用路由表查找下一跳地址，以及使用 ARP 協議查詢它的 Mac 地址。

「

注意：在 OSI 參考模型中 ARP 協議位於鏈路層，但在 TCP/IP 中，它位於網絡層。

」

4. 鏈路層：以太網協議

以太網協議

根據以太網協議將數據分爲以「幀」爲單位的數據包，每一幀分爲兩個部分：

• 標頭：數據包的發送者、接受者、數據類型
• 數據：數據包具體內容

Mac 地址

以太網規定了連入網絡的全部設備都必須具有「網卡」接口，數據包都是從一塊網卡傳遞到另外一塊網卡，網卡的地址就是 Mac 地址。每個 Mac 地址都是獨一無二的，具有了一對一的能力。

服務器接受請求

5、瀏覽器接受響應

瀏覽器接收到來自服務器的響應資源後，會對資源進行分析。

迴流(reflow)

當瀏覽器發現某個部分發現變化影響了佈局時，須要倒回去從新渲染，會從html標籤開始遞歸往下，從新計算位置和大小。

reflow基本是沒法避免的，由於當你滑動一下鼠標、resize 窗口，頁面就會產生變化。

重繪(repaint)

改變了某個元素的背景色、文字顏色等等不會影響周圍元素的位置變化時，就會發生重繪。

每次重繪後，瀏覽器還須要合併渲染層並輸出到屏幕上。

瀏覽器對同一域名的併發鏈接數是有限的，一般爲 6 個

宏任務

分爲：

• 同步任務：按照順序執行，只有前一個任務完成後，才能執行後一個任務
• 異步任務：不直接執行，只有知足觸發條件時，相關的線程將該異步任務推動任務隊列中，等待JS引擎主線程上的任務執行完畢時纔開始執行，例如異步Ajax、DOM事件，setTimeout等。

微任務

微任務是ES6和Node環境下的，主要 API 有：Promise，process.nextTick。

代碼例子

console.log('1'); // 宏任務 同步

setTimeout(function() {
console.log('2'); // 宏任務 異步
})

new Promise(function(resolve) {
console.log('3'); // 宏任務 同步
resolve();
}).then(function() {
console.log('4') // 微任務
})
console.log('5') // 宏任務 同步

以上代碼輸出順序爲：1,3,5,4,2

你所不知道的 HSTS:http://t.cn/AiR8pTqx

[2]

詳見這篇文章: http://t.cn/AiR8pnEC

[3]

MIME: http://t.cn/AiR8prtm

[4]

語法規範: http://t.cn/AiR80GdO

[5]

這篇文章:http://t.cn/AiR80c1k

[6]

what-happens-when-zh_CN: http://t.cn/AiR80xb5

[7]

Tags to DOM:http://t.cn/AiR80djX

[8]

完全理解瀏覽器的緩存機制: http://t.cn/AiR8Ovob

[9]

瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕: http://t.cn/AiR8Oz06

[10]

深刻淺出瀏覽器渲染原理: http://t.cn/AiR8O4fO

[11]

js引擎的執行過程（一）:http://t.cn/AiR8Ot3s