從url輸入到前端頁面展示

老生常談，也有可能在面試裡遇到～

1. 從 url 輸入到頁面展現背後發生了什麼事？

2. 一次完整的 http 事務是怎麼乙個過程？

3. 瀏覽器是如何渲染頁面的？

4. 瀏覽器的核心有哪些？分別有什麼代表的瀏覽器？

5. 重新整理頁面，js 請求一般會有哪些地方有快取處理？

上邊這一連串的字元，就叫做 url（uniform resource locator 統一資源定位符），實際上就是我們通常叫的「**」。

在茫茫網路世界中，我們的瀏覽器是靠乙個個 url 來查詢資源的具體位置的。

1.2.1 協議部分

它是瀏覽器和 www 全球資訊網之間的溝通方式，它會告訴瀏覽器在網路世界中找到資源的正確位置。 常見的協議有：http（最常見的網路傳輸協議）、https（進行加密的網路傳輸協議）、file（本地資料夾協議）、ftp、telnet 等。

1.2.2 網路位址部分

即我們常說的「網域名稱」（domain name），為了方便記憶，人們用可以語義化的網域名稱來登入**。 但我們必須知道，每乙個網域名稱背後都有其對應的 ip 位址。

ip 是網路世界中每台聯網的計算機為實現相互通訊而遵循的規則協議，ip 可以具體分為：

1️⃣區域網 ip：

2️⃣公網 ip：

3️⃣本機 ip：

1.2.3 資源路徑部分

提到網域名稱和 ip 關係後，就必須理解 dns（domain name system 網域名稱系統）——用來記錄網域名稱和 ip 位址相互對映的資訊。

從 url 輸入到頁面展現經過以下過程：

在瀏覽器輸入 url；

瀏覽器查詢網域名稱對應的 ip 位址；

瀏覽器根據 ip 位址與伺服器建立聯絡；

瀏覽器與伺服器通訊：瀏覽器請求，伺服器處理請求並呈現頁面。

在位址列輸入相應的 url 。

第一步中，我們已經輸入了相應的 url，但瀏覽器本身並不能識別 url 是什麼，因此從我們輸入 url 開始，瀏覽器就要進行網域名稱解析來找到對應 ip——dns 解析是瀏覽器的實際定址方式：

第2步中，瀏覽器通過 ip 定址找到了對應的伺服器，瀏覽器就將使用者發起的 http 請求傳送給伺服器。伺服器開始處理使用者請求：

後台開發現在有很多框架，但大部分都是按照 mvc（model view controller）設計模式搭建的，它將伺服器上的應用程式分成3個核心部件且分別處理自己的任務，實現輸入、處理、輸出的分離：

3.3.1 模型（model）

3.3.2 檢視（view）

3.3.3 控制器（controller）

從輸入URL到頁面展示

這個時候有兩種情況，第一種是子網域名稱伺服器返回了這個url對應的ip位址，第二種情況是經過了cdn排程，如果目標 使用了cdn服務，則需要在cdn服務商的平台設定相應的cname記錄，這個記錄是cdn服務廠商的乙個dns伺服器的網域名稱，子網域名稱伺服器會返回這個cname記錄，本地dns伺服器得...