Web 前置知識——老生常談的從 URL 輸入到頁面展示背後發生的事

本知識學習用時：1小時

---

前言：學前端前，我經常使用的瀏覽器是搜狗、360，搜索引擎用的是百度。學前端後，谷歌算是從新爲我打開了認識新世界的大門。但無論用什麼瀏覽器，登陸網站都是咱們每個互聯網人天天都會作的事。但咱們是否想過，從咱們打開瀏覽器在地址欄中輸入一連串的字符，到按下鍵盤上的 Enter 鍵、頁面展示在咱們眼前，這一連續動做的背後，網絡、計算機都爲咱們作了些什麼？以及你即將從事的前端工做又在這其中參與了哪一項或哪幾項工做呢？

---

1 相關概念簡述

首先，打開你最常瀏覽的一個網站，在最上方的地址欄裏，你將會看到一連串的字符。例如知乎：

https://www.zhihu.com/people/oliver-8-10/activities

上邊這一連串的字符，就叫作 URL（Uniform Resource Locator 統一資源定位符），實際上就是咱們一般叫的「網址」。

1.1 URL 的做用

在茫茫網絡世界中，咱們的瀏覽器是靠一個個 URL 來查找資源的具體位置的。

1.2 URL 的組成部分（用如下例子說明）

https://www.zhihu.com/people/oliver-8-10/activities

1.2.1 協議部分

https

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

1.2.2 網絡地址部分

www.zhihu.com

即咱們常說的「域名」（Domain Name），爲了方便記憶，人們用能夠語義化的域名來登陸網站。
但咱們必須知道，每個域名背後都有其對應的 IP 地址。
IP 是網絡世界中每臺聯網的計算機爲實現相互通訊而遵循的規則協議，IP 能夠具體分爲：

1️⃣局域網 IP：

• 例如一個合租的房子，你們共用一個路由的 wifi，那實際上全部鏈接上這個 wifi 的電腦都處於一樣一個局域網，這裏的 IP 就是局域網 IP；
• 在一樣的局域網裏，能夠直接經過這個 IP 地址訪問這個局域網裏的其餘機器；
• 但陌生人是不能夠經過這個 IP 找到你的，由於這個 IP 是假的，只在這個小圈子裏能夠用。

2️⃣公網 IP：

• 假如你作了一個網站要放在公網上，就要申請公網 IP，公網 IP 是須要申請的。

3️⃣本機 IP：

• 當前電腦的 IP 是 127.0.0.1 ，就是表明本身。

1.2.3 資源路徑部分

/people/oliver-8-10/activities

1.3 DNS

提到域名和 IP 關係後，就必須理解 DNS（Domain Name System 域名系統）——用來記錄域名和 IP 地址相互映射的信息。

• DNS 做用：可讓人們免於記住那些繁瑣的數串；
• 全國 DNS 信息能夠在網上查找到，各省都有對應分配的 IP 網段；
• 大型企業都有本身的 DNS 服務器，專門用來存儲域名和 IP 的映射關係；
• 如谷歌的 DNS 服務器地址 8.8.8.8 ；國內知名 DNS 服務器地址 114.114.114.114 。

2 大體流程概述

從 URL 輸入到頁面展示通過如下過程：

1. 在瀏覽器輸入 URL；
2. 瀏覽器查找域名對應的 IP 地址；
3. 瀏覽器根據 IP 地址與服務器創建聯繫；
4. 瀏覽器與服務器通訊：瀏覽器請求，服務器處理請求並呈現頁面。

3 具體流程概述

3.1 第一步，在瀏覽器輸入 URL

在地址欄輸入相應的 URL 。

3.2 第二步，瀏覽器查找域名對應的 IP 地址

第一步中，咱們已經輸入了相應的 URL，但瀏覽器自己並不能識別 URL 是什麼，所以從咱們輸入 URL 開始，瀏覽器就要進行域名解析來找到對應 IP——DNS 解析是瀏覽器的實際尋址方式：

• 查找瀏覽器緩存——近期瀏覽過的網站，瀏覽器會緩存 DNS 記錄一段時間 （若是沒有則往下） ；
• 查找系統緩存——從 C 盤的 hosts 文件查找是否有存儲的 DNS 信息，查找是否有目標域名和對應的 IP 地址 （若是沒有則往下）；
• 查找路由器緩存 （若是沒有則往下）；
• 查找 ISP DNS 緩存——從網絡服務商（好比電信）的 DNS 緩存信息中查找（若是沒有則往下）；
• 經由以上方式都沒找到對應 IP 的話，就會向根域名服務器查找目標 URL 對應的 IP，根域名服務器會向下級服務器轉達請求，層層下發，直到找到對應的 IP 爲止。

3.3 第三步，瀏覽器根據 IP 地址與服務器創建聯繫

第2步中，瀏覽器經過 IP 尋址找到了對應的服務器，瀏覽器就將用戶發起的 http 請求發送給服務器。服務器開始處理用戶請求：

• 每臺服務器上都會安裝處理請求的應用——web sever；
• 常見的 web sever 產品有：apache 、nginx 、IIS 和 Lighttpd 等；
• web sever 能夠理解爲一個管理者，它不作具體的請求處理，而是會結合配置文件，把不一樣用戶發來的請求委託給服務器上專門處理相應請求的程序（服務器上的相應程序開始處理請求的這一部分，通俗說就是實際後臺處理的工做）：

後臺開發如今有不少框架，但大部分都是按照 MVC（model view controller）設計模式搭建的，它將服務器上的應用程序分紅3個核心部件且分別處理本身的任務，實現輸入、處理、輸出的分離：

3.3.1 模型（model）

• 模型，是將實際開發過程當中的業務規則和所涉及的數據格式進行模型化；
• 應用於模型的代碼只需寫一次就能夠被多個視圖重用；
• 在 MVC 三個部件中，模型擁有最多的處理任務；
• 一個模型能爲多個視圖提供數據。

3.3.2 視圖（view）

• 視圖是用戶看到並與之交互的界面；
• 這一部分，也就是咱們前端工做的主力所在。

3.3.3 控制器（controller）

• 做用：接受用戶的輸入並調用模型（M）和視圖（V）去完成用戶的需求；
• 地位：控制器也是處於一個管理者的地位——從視圖（V）接收請求並決定調用哪個模型構件（M）來處理請求，而後再肯定用哪一個視圖（V）來顯示模型（M）處理返回的數據。

🏆總而言之：

• 首先，控制器（C）接收用戶的請求，並決定應該調用哪一個模型（M）來進行處理；
• 而後，模型（M）用業務邏輯來處理用戶的請求並返回數據；
• 最後，控制器（C）再用相應的視圖（V）來格式化模型（M），進而返回 html 字符串給瀏覽器。

3.4 第四步，瀏覽器與服務器通訊

在上邊的第 3 步中，服務器返回了 html 字符串給瀏覽器，此時，瀏覽器將會對其進行解析、渲染並最終繪製網頁：

3.4.1 加載

• 瀏覽器對一個 html 頁面的加載順序是從上而下的；
• 瀏覽器在加載的過程當中，同時進行解析、渲染處理；
• 在這個過程當中，遇到 link 標籤、image 標籤、script 標籤時，瀏覽器會再次向服務器發送請求以獲取相應的 css 文件、圖片資源、js 文件，並執行 js 代碼，同步進行加載、解析。

3.4.2 解析、渲染

• 解析的過程，其實就是生成 dom 樹（Document Object Model 文檔對象模型）；
• dom 樹是由 dom 元素及屬性節點組成，而且加上 css 解析的樣式對象和 js解析後的動做實現；
• 渲染：就是將 dom 樹進行可視化表示。

3.4.3 繪製網頁

• 瀏覽器經過渲染，將 dom 樹可視化，獲得渲染樹；
• 構建渲染樹使頁面以正確的順序繪製出來，瀏覽器遵循必定的渲染規則，實現網站頁面的繪製，並最終完成頁面的展現。

---

後記：以上就是從 URL 輸入到頁面展現的所有過程，不得不佩服計算機真的神通廣大、人類真的智慧無窮。代碼的世界是嚴謹的、是一絲不苟的，你付出，它就有回饋。固然，以上每一個節點都囊括不少的知識點，對於學前端的你我來講，要保持謙卑之心，學無止境，它也值得你我用後邊的 10000 小時來對待。

（本文版權歸 「Oli's 前端一萬小時」 全部，未經受權，請勿轉載）