【📔 前端小筆記】瀏覽器輸入URL以後發生了什麼？

這個基本上是前端面試中的高頻考題之一，由於從這個問題能衍生的問題實在是太多了，這也是前端工做的核心問題。

0. 大體流程

看圖的話更容易記一些，主要就是如下四個過程：

1. URL 解析
2. 創建 TCP 鏈接
3. 服務器響應請求
4. 資源解析和渲染

下面將會基於這幾個過程進行描述和簡要的分析。

1. 瀏覽器輸入 URL

1.1 域名和 ip 地址的區別是什麼？如何進行映射？靜態映射和動態映射的區別？

首先須要搞明白的是，域名和 ip 地址是不一樣的，域名是爲了更方便記憶 ip 所產生的，ip 纔是服務器在網絡上的真實地址。

IP 地址是用來惟一標識互聯網上計算機的邏輯地址，讓電腦之間能夠相互通訊，每臺連網計算機都依靠 IP 地址來互相區分，相互聯繫。

IP 地址一般指的是網絡中的主機，而域名則一般表示一個網站，一個域名能夠綁定到多個 ip 上，多個域名也能夠綁定到一個 ip 上。

爲了讓域名和地址可以相互轉換，就須要對其進行映射，有兩種方式：

1. 靜態映射 在瀏覽器端存儲一份域名到 ip 地址的映射表，只供本設備使用。
2. 動態映射 利用 DNS 來進行域名解析，在專門的 DNS 服務器上配置主機到 IP 地址的映射。

   DNS（Domain Name System，域名系統），萬維網上做爲域名和 IP 地址相互映射的一個分佈式數據庫，可以使用戶更方便的訪問互聯網，而不用去記住可以被機器直接讀取的 IP 數串。DNS 協議運行在 UDP 協議之上，使用端口號 53。DNS 可供全部網絡上的節點使用。

1.2 描述一下域名解析 && 瀏覽器查詢 ip 的過程

關鍵詞：DNS 查詢、域名解析

1. 瀏覽器從緩存的映射表中尋找域名對應的記錄，若是存在則直接返回 IP
2. 緩存中若是沒有記錄命中，則進行系統調用查詢 hosts，查找用戶定義的 IP 映射。
3. 前二者都無效的狀況下， 向路由器發送 DNS 查詢的請求，或者直接向用戶定義的 DNS 服務地址發送域名解析的請求。

   DNS 服務器會從根域名服務器開始遞歸搜索，從.com 頂級域名服務器，到 baidu 的域名服務器。

1.3 短網址的實現 ShortURL

短網址的實現創建在轉譯和重定向的基礎上，重定向的狀態碼包含 301 永久重定向和 302 臨時重定向。

短碼轉譯這裏舉出兩個比較經典的算法：

1. 自增序列算法
2. 摘要算法

1.4 同源策略

源：協議://域名:端口，三者一致爲同源

1.5 瀏覽器容許跨域加載的資源：

1. link href="XXX"
2. img src="XXX"
3. script src="XXX"
4. iframe "src"="XXX"

1.6 爲何須要跨域？/ 跨域的幾種方法？

跨域的緣由：瀏覽器攔截了非同源的請求

跨域的幾種方式：

1. Jsonp (瀏覽器經過 script 請求，告知服務器執行 callback 的名稱，服務器返回對應的數據執行體)
2. Websocket 通訊 （Origin 字段是關鍵）
3. CORS （當前主要的跨域方式，瀏覽器默認發起 CORS 請求，服務器設置 Access-Control-Allow-Origin 字段）
4. iframe 跨域
5. window.postMessage
6. 服務器代理跨域 Proxy

1.7 CSRF 攻擊和防護

2. 創建 TCP 鏈接

關鍵詞：TCP/IP 協議 / 四層模型 / 三次握手

2.1 TCP/IP 協議組是什麼？

在 TCP/IP 協議組 中包含一系列用於處理數據通訊的協議：

• TCP (傳輸控制協議) - 應用程序之間的可靠通訊
• UDP (用戶數據包協議) - 應用程序之間的簡單通訊
• IP (網際協議) - 計算機之間的通訊
• ICMP (因特網消息控制協議) - 針對錯誤和狀態
• DHCP (動態主機配置協議) - 針對動態尋址
• ... 如圖所示

TCP / IP 協議組

• TCP/IP 意味着 TCP 和 IP 在一塊兒協同工做。
• TCP 負責應用軟件（好比你的瀏覽器）和網絡軟件之間的通訊。
• IP 負責計算機之間的通訊。
• TCP 負責將數據分割並裝入 IP 包，而後在它們到達的時候從新組合它們。
• IP 負責將包發送至接受者。

在這其中須要着重瞭解一下的就是數據是如何進行處理的、TCP、IP 以及 TCP 和 UDP 的區別。

數據處理流程

2.2 TCP 與 UDP 的區別

• TCP 是面向鏈接的、可靠的流協議。流就是指不間斷的數據結構，當應用程序採用 TCP 發送消息時，雖然能夠保證發送的順序，但仍是猶如沒有任何間隔的數據流發送給接收端。TCP 爲提供可靠性傳輸，實行「順序控制」或「重發控制」機制。此外還具有「流控制（流量控制）」、「擁塞控制」、提升網絡利用率等衆多功能。
• UDP 是不具備可靠性的數據報協議。細微的處理它會交給上層的應用去完成。在 UDP 的狀況下，雖然能夠確保發送消息的大小，卻不能保證消息必定會到達。所以，應用有時會根據本身的須要進行重發處理。
• TCP 和 UDP 的優缺點沒法簡單地、絕對地去作比較：TCP 用於在傳輸層有必要實現可靠傳輸的狀況；而在一方面，UDP 主要用於那些對高速傳輸和實時性有較高要求的通訊或廣播通訊。TCP 和 UDP 應該根據應用的目的按需使用。

瀏覽器利用 IP 直接與網站主機通訊。瀏覽器發出 TCP（SYN 標誌位爲 1）鏈接請求，主機返回 TCP（SYN，ACK 標誌位均爲 1）應答報文，瀏覽器收到應答報文發現 ACK 標誌位爲 1，表示鏈接請求確認。瀏覽器返回 TCP（）確認報文，主機收到確認報文，三次握手，TCP 鏈接創建完成。

2.3 三次握手的過程

2.4 四次握手的過程 / 爲何四次握手最後須要等待 2MSL 的時間？

瀏覽器發送完最後的 ACK 請求以後，須要等待 2MSL 的時間，是由於爲了保證客戶端發送的最後一個 ACK 報文段可以到達服務器。

2.5 HTTP 和 HTTPS / 對稱加密和非對稱加密的區別

HTTP 主要版本：1.0（短鏈接）\1.1（長鏈接）\2.0（多路複用、頭部壓縮、加密傳輸）

HTTPS = HTTP + SSL

SSL 加密：非對稱加密 + CA 證書體系

加密的兩種分類：

1. 對稱加密：只使用一個密鑰
2. 非對稱加密：客戶端和服務器各具備私鑰和公鑰

3. 服務器響應請求

在 TCP 鏈接創建完成後，瀏覽器向主機發起一個 HTTP-GET 方法報文請求。請求中包含訪問的 URL，也就是www.baidu.com/ ，還有 User-Agent 用戶瀏覽器操做系統信息，編碼等。

3.1 常見的服務器狀態碼

1** 請求狀態

• 100 Continue 繼續，通常在發送 post 請求時，已發送了 http、header 以後服務端將返回此信息，表示確認，以後發送具體參數信息

2** 響應狀態

• 200 OK 正常返回信息
• 201 Created 請求成功而且服務器建立了新的資源

3** 資源狀態

• 301 Moved Permanently 永久重定向，請求的網頁已永久移動到新位置。
• 302 Found 臨時重定向，適用於「因爲不可預見的緣由該頁面暫不可用」
• 303 See Other 臨時重定向，全部方法變動爲GET，防止表單提交跳轉頁面時因爲頁面刷新而致使的重複觸發操做
• 304 Not Modified 未更改，特殊重定向，前端緩存機制涉及

4** 網頁狀態

• 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
• 404 Not Found 找不到如何與 URI 相匹配的資源。
• 412 Precondition Failed 條件判斷失敗，協商緩存機制涉及

5** 服務器狀態

• 500 Internal Server Error 最多見的服務器端錯誤。

3.2 重定向的做用

重定向是爲了負載均衡或者導入流量，提升 SEO 排名。利用一個前端服務器接受請求，而後負載到不一樣的主機上，能夠大大提升站點的業務併發處理能力；

重定向也可將多個域名的訪問，集中到一個站點；因爲 baidu.com，www.baidu.com會被搜索引擎認爲是兩個網站，照成每一個的連接數都會減小從而下降排名，永久重定向會將兩個地址關聯起來，搜索引擎會認爲是同一個網站，從而提升排名。

4. 資源解析和渲染

4.1 頁面生成渲染樹的過程（Render Tree）

4.2 如何減小頁面的重排（Reflow）重繪(Repaint)

1. 減小對 DOM 的操做
2. Js 合併操做（document.createDocumentFragment, el.style.cssText="...."）
3. CSS 切換類名
4. 緩存佈局信息，減小屬性訪問

4.3 <script> 爲何建議放在 HTML 的最後部分？

js 的加載和執行會阻塞渲染進程。

4.4 瀏覽器的事件循環機制 EventLoop \ 宏任務和微任務

4.5 瀏覽器緩存機制

強緩存：Expires \ Cache-control

協商緩存: Etag \ Last-modified

參考文章

1. W3School - TCP/IP 簡介
2. 一篇文章帶你熟悉 TCP/IP 協議（網絡協議篇二）

筆者看法有限，只能簡要地進行概括，歡迎各位幫助指正。