打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個過程？

先給大家來張總體流程圖，具體步驟請看下文分解！

從URL輸入到頁面展現(xiàn)

一、URL到底是啥

URL（Uniform Resource Locator），統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上資源，俗稱網(wǎng)址。比如：?http://www.w3school.com.cn/html/index.asp，遵守以下的語法規(guī)則scheme://host.domain:port/path/filename

各部分解釋如下：

• scheme – 定義因特網(wǎng)服務(wù)的類型。常見的協(xié)議有http、https、ftp、file，其中最常見的類型是 http，而https則是進行加密的網(wǎng)絡(luò)傳輸。
• host – 定義域主機（http 的默認主機是 www）。
• domain – 定義因特網(wǎng)域名，比如 w3school.com.cn。
• port – 定義主機上的端口號（http 的默認端口號是 80）。
• path – 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
• filename – 定義文檔/資源的名稱。

二、域名解析（DNS）

在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因為瀏覽器并不能識別域名，需要通過域名直接找到相應(yīng)的IP地址。大家這里或許會有個疑問——為啥要設(shè)置域名？怎么不一開始就給個IP地址？這樣可以省去解析麻煩。

我們先來了解下什么是IP地址？

1. IP地址

IP地址是指互聯(lián)網(wǎng)協(xié)議地址，是IP Address的縮寫。IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。IP地址是一個32位的二進制數(shù)，比如：127.0.0.1為本機IP，如果每個網(wǎng)址都是一串數(shù)字，那就不便于記憶!

域名就相當于IP地址喬裝打扮的偽裝者，帶著一副面具，它的作用就是便于記憶和溝通的一組服務(wù)器的地址。

但這樣有時候會帶來一種風險——DNS劫持，就是使域名對應(yīng)的不再是原本對應(yīng)的IP，其效果就是對特定的網(wǎng)絡(luò)不能訪問或訪問的是假網(wǎng)址，又難于被用戶發(fā)覺，曾導(dǎo)致巴西最大銀行巴西銀行近1%客戶受到攻擊而導(dǎo)致賬戶被盜。

2. 什么是域名解析

DNS是一個網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡單來說就是在DNS上記錄一條信息記錄。例如：baidu.com 220.114.23.56（服務(wù)器外網(wǎng)IP地址）80（服務(wù)器端口號）。

瀏覽器通過向DNS服務(wù)器發(fā)送域名，DNS服務(wù)器查詢到與域名相對應(yīng)的IP地址，然后返回給瀏覽器，瀏覽器再將IP地址打在協(xié)議上，同時請求參數(shù)也會在協(xié)議搭載，然后一并發(fā)送給對應(yīng)的服務(wù)器，下一步就到了服務(wù)器處理階段的工作。

3. 域名解析流程

• 瀏覽器緩存：如果在之前對該url指定的主機進行過訪問，瀏覽器會緩存該主機的IP一段時間（該時間瀏覽器指定），然后通過該IP地址找到對應(yīng)主機；
• 系統(tǒng)緩存：若瀏覽器中無該緩存，那么就到系統(tǒng)緩存中進行查詢，瀏覽器會進行系統(tǒng)調(diào)用，查詢緩存；
• 路由器緩存：如果系統(tǒng)緩存中也沒有，那么就到路由器緩存中進行查詢；
• ISP DNS 緩存：如果路由器緩存依舊未命中，那么就到ISP DNS中查詢，一般的域名都能在這里查詢得到；
• 遞歸搜索：如果以上都沒有查詢到，那么就會到頂級域名服務(wù)器的根服務(wù)器中進行遞歸查詢，只要該域名存在就肯定能找得到。

三、服務(wù)器處理響應(yīng)請求

1. 服務(wù)器

服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計算機，它偵聽網(wǎng)絡(luò)上的其他計算機（客戶機）提交的服務(wù)請求，并提供相應(yīng)的服務(wù)。比如：網(wǎng)頁服務(wù)、文件下載服務(wù)、郵件服務(wù)、視頻服務(wù)。

而客戶端主要的功能是瀏覽網(wǎng)頁、看視頻、聽音樂等等，兩者截然不同。 每臺服務(wù)器上都會安裝處理請求的應(yīng)用——web server，常見的web server產(chǎn)品有apache、nginx、IIS或Lighttpd等。

web server 擔任管控的角色，對于不同用戶發(fā)送的請求，會結(jié)合配置文件，把不同請求委托給服務(wù)器上處理相應(yīng)請求的程序進行處理（例如：CGI腳本，JSP腳本，servlets，ASP腳本，服務(wù)器端JavaScript，或者一些其它的服務(wù)器端技術(shù)等），然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)。

服務(wù)器和客戶端區(qū)別

2. MVC后臺處理階段

后臺開發(fā)現(xiàn)在有很多框架，但大部分都還是按照MVC設(shè)計模式進行搭建的。

MVC是一個設(shè)計模式，將應(yīng)用程序分成三個核心部件：模型（model）——視圖（view）——控制器（controller），它們各自處理自己的任務(wù)，實現(xiàn)輸入、處理和輸出的分離。

MVC架構(gòu)

（1）視圖（view）

它是提供給用戶的操作界面，是程序的外殼。

（2）模型（model）

模型主要負責數(shù)據(jù)交互，在MVC的三個部件中，模型擁有最多的處理任務(wù)，一個模型能為多個視圖提供數(shù)據(jù)。

（3）控制器（controller）

它負責根據(jù)用戶從”視圖層”輸入的指令，選取”模型層”中的數(shù)據(jù)，然后對其進行相應(yīng)的操作，產(chǎn)生最終結(jié)果?？刂破鲗儆诠芾碚呓巧瑥囊晥D接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求，然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。

這三層是緊密聯(lián)系在一起的，但又是互相獨立的，每一層內(nèi)部的變化不影響其他層，每一層都對外提供接口（Interface），供上面一層調(diào)用。

至于這一階段發(fā)生什么？

簡而言之，首先瀏覽器發(fā)送過來的請求先經(jīng)過控制器，控制器進行邏輯處理和請求分發(fā)，接著會調(diào)用模型。這一階段模型會獲取redis db以及MySQL的數(shù)據(jù)，獲取數(shù)據(jù)后將渲染好的頁面，通過視圖返回給瀏覽器，最后瀏覽器通過渲染引擎將網(wǎng)頁呈現(xiàn)在用戶面前。因此，下一步就來到瀏覽器處理階段

四、瀏覽器的處理

瀏覽器拿到響應(yīng)文本HTML后，以chrome瀏覽器為例，介紹下瀏覽器渲染機制

chrome瀏覽器渲染機制：

• 處理 HTML 標記并構(gòu)建 DOM 樹。
• 處理 CSS 標記并構(gòu)建 CSSOM 樹。
• 將 DOM 與 CSSOM 合并成一個渲染樹（render 樹）。
• 根據(jù)渲染樹來布局，以計算每個節(jié)點（也就是每個Element）的幾何位置，這又叫l(wèi)ayout和reflow過程。
• 最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制，將各個節(jié)點繪制到屏幕上。
• 于是就來到了繪制網(wǎng)頁的最后階段。

五、繪制網(wǎng)頁

瀏覽器根據(jù)html和css計算得到渲染樹之后，將渲染好的頁面圖像顯示出來，即繪制網(wǎng)頁，并開始響應(yīng)用戶的操作。

六、后記

隨著學習的深入，對于頁面加載這個主題認識更加深刻，之前一些困惑點現(xiàn)在都迎刃而解。

作者：浪里行舟

原文鏈接：https://www.jianshu.com/p/40d76ebb94e2

本文由 @浪里行舟 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CCO協(xié)議