注：打開(kāi)浏覽器(qì)從輸入網址到網頁呈現在大(dà)家(jiā)面前，背後到底發生(shēng)了什麽？經曆怎麽樣的一個(gè)過程？


先給大(dà)家(jiā)來(lái)張總體(tǐ)流程圖，具體(tǐ)步驟請(qǐng)看下文分解！


從URL輸入到頁面展現

一、URL到底是啥

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

各部分解釋如下：

scheme – 定義因特網服務的類型。常見的協議有(yǒu)http、https、ftp、file，其中最常見的類型是 http，而https則是進行(xíng)加密的網絡傳輸。
host – 定義域主機（http 的默認主機是 www）。
domain – 定義因特網域名，比如 w3school.com.cn。
port – 定義主機上(shàng)的端口号（http 的默認端口号是 80）。
path – 定義服務器(qì)上(shàng)的路徑（如果省略，則文檔必須位于網站(zhàn)的根目錄中）。
filename – 定義文檔/資源的名稱。
二、域名解析（DNS）

在浏覽器(qì)輸入網址後，首先要經過域名解析，因為(wèi)浏覽器(qì)并不能識别域名，需要通(tōng)過域名直接找到相應的IP地址。大(dà)家(jiā)這裏或許會(huì)有(yǒu)個(gè)疑問——為(wèi)啥要設置域名？怎麽不一開(kāi)始就給個(gè)IP地址？這樣可(kě)以省去解析麻煩。

我們先來(lái)了解下什麽是IP地址？

1. IP地址


IP地址是指互聯網協議地址，是IP Address的縮寫。IP地址是IP協議提供的一種統一的地址格式，它為(wèi)互聯網上(shàng)的每一個(gè)網絡和(hé)每一台主機分配一個(gè)邏輯地址，以此來(lái)屏蔽物理(lǐ)地址的差異。IP地址是一個(gè) 32 位的二進制(zhì)數(shù)，比如：127.0.0. 1 為(wèi)本機IP，如果每個(gè)網址都是一串數(shù)字，那(nà)就不便于記憶!

域名就相當于IP地址喬裝打扮的僞裝者，帶着一副面具，它的作(zuò)用就是便于記憶和(hé)溝通(tōng)的一組服務器(qì)的地址。

但(dàn)這樣有(yǒu)時(shí)候會(huì)帶來(lái)一種風險——DNS劫持，就是使域名對應的不再是原本對應的IP，其效果就是對特定的網絡不能訪問或訪問的是假網址，又難于被用戶發覺，曾導緻巴西最大(dà)銀行(xíng)巴西銀行(xíng)近1%客戶受到攻擊而導緻賬戶被盜。

2. 什麽是域名解析

DNS是一個(gè)網絡服務器(qì)，我們的域名解析簡單來(lái)說就是在DNS上(shàng)記錄一條信息記錄。例如：baidu.com 220.114.23.56（服務器(qì)外網IP地址）80（服務器(qì)端口号）。

浏覽器(qì)通(tōng)過向DNS服務器(qì)發送域名，DNS服務器(qì)查詢到與域名相對應的IP地址，然後返回給浏覽器(qì)，浏覽器(qì)再将IP地址打在協議上(shàng)，同時(shí)請(qǐng)求參數(shù)也會(huì)在協議搭載，然後一并發送給對應的服務器(qì)，下一步就到了服務器(qì)處理(lǐ)階段的工作(zuò)。

3. 域名解析流程

浏覽器(qì)緩存：如果在之前對該url指定的主機進行(xíng)過訪問，浏覽器(qì)會(huì)緩存該主機的IP一段時(shí)間(jiān)（該時(shí)間(jiān)浏覽器(qì)指定），然後通(tōng)過該IP地址找到對應主機；
系統緩存：若浏覽器(qì)中無該緩存，那(nà)麽就到系統緩存中進行(xíng)查詢，浏覽器(qì)會(huì)進行(xíng)系統調用，查詢緩存；
路由器(qì)緩存：如果系統緩存中也沒有(yǒu)，那(nà)麽就到路由器(qì)緩存中進行(xíng)查詢；
ISP DNS 緩存：如果路由器(qì)緩存依舊(jiù)未命中，那(nà)麽就到ISP DNS中查詢，一般的域名都能在這裏查詢得(de)到；
遞歸搜索：如果以上(shàng)都沒有(yǒu)查詢到，那(nà)麽就會(huì)到頂級域名服務器(qì)的根服務器(qì)中進行(xíng)遞歸查詢，隻要該域名存在就肯定能找得(de)到。

三、服務器(qì)處理(lǐ)響應請(qǐng)求

1. 服務器(qì)

服務器(qì)是網絡環境中的高(gāo)性能計(jì)算(suàn)機，它偵聽(tīng)網絡上(shàng)的其他計(jì)算(suàn)機（客戶機）提交的服務請(qǐng)求，并提供相應的服務。比如：網頁服務、文件下載服務、郵件服務、視(shì)頻服務。

而客戶端主要的功能是浏覽網頁、看視(shì)頻、聽(tīng)音(yīn)樂等等，兩者截然不同。 每台服務器(qì)上(shàng)都會(huì)安裝處理(lǐ)請(qǐng)求的應用——web server，常見的web server産品有(yǒu)apache、nginx、IIS或Lighttpd等。

web server 擔任管控的角色，對于不同用戶發送的請(qǐng)求，會(huì)結合配置文件，把不同請(qǐng)求委托給服務器(qì)上(shàng)處理(lǐ)相應請(qǐng)求的程序進行(xíng)處理(lǐ)（例如：CGI腳本，JSP腳本，servlets，ASP腳本，服務器(qì)端JavaScript，或者一些(xiē)其它的服務器(qì)端技(jì)術(shù)等），然後返回後台程序處理(lǐ)産生(shēng)的結果作(zuò)為(wèi)響應。


服務器(qì)和(hé)客戶端區(qū)别

2. MVC後台處理(lǐ)階段

後台開(kāi)發現在有(yǒu)很(hěn)多(duō)框架，但(dàn)大(dà)部分都還(hái)是按照MVC設計(jì)模式進行(xíng)搭建的。

MVC是一個(gè)設計(jì)模式，将應用程序分成三個(gè)核心部件：模型（model）——視(shì)圖（view）——控制(zhì)器(qì)（controller），它們各自處理(lǐ)自己的任務，實現輸入、處理(lǐ)和(hé)輸出的分離。


MVC架構

（1）視(shì)圖（view）

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

（2）模型（model）

模型主要負責數(shù)據交互，在MVC的三個(gè)部件中，模型擁有(yǒu)最多(duō)的處理(lǐ)任務，一個(gè)模型能為(wèi)多(duō)個(gè)視(shì)圖提供數(shù)據。

（3）控制(zhì)器(qì)（controller）

它負責根據用戶從”視(shì)圖層”輸入的指令，選取”模型層”中的數(shù)據，然後對其進行(xíng)相應的操作(zuò)，産生(shēng)最終結果。控制(zhì)器(qì)屬于管理(lǐ)者角色，從視(shì)圖接收請(qǐng)求并決定調用哪個(gè)模型構件去處理(lǐ)請(qǐng)求，然後再确定用哪個(gè)視(shì)圖來(lái)顯示模型處理(lǐ)返回的數(shù)據。


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

至于這一階段發生(shēng)什麽？

簡而言之，首先浏覽器(qì)發送過來(lái)的請(qǐng)求先經過控制(zhì)器(qì)，控制(zhì)器(qì)進行(xíng)邏輯處理(lǐ)和(hé)請(qǐng)求分發，接着會(huì)調用模型。這一階段模型會(huì)獲取redis db以及MySQL的數(shù)據，獲取數(shù)據後将渲染好的頁面，通(tōng)過視(shì)圖返回給浏覽器(qì)，最後浏覽器(qì)通(tōng)過渲染引擎将網頁呈現在用戶面前。因此，下一步就來(lái)到浏覽器(qì)處理(lǐ)階段

四、浏覽器(qì)的處理(lǐ)

浏覽器(qì)拿(ná)到響應文本HTML後，以chrome浏覽器(qì)為(wèi)例，介紹下浏覽器(qì)渲染機制(zhì)

chrome浏覽器(qì)渲染機制(zhì)：

處理(lǐ) HTML 标記并構建 DOM 樹(shù)。
處理(lǐ) CSS 标記并構建 CSSOM 樹(shù)。
将 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)（render 樹(shù)）。
根據渲染樹(shù)來(lái)布局，以計(jì)算(suàn)每個(gè)節點（也就是每個(gè)Element）的幾何位置，這又叫layout和(hé)reflow過程。
最後通(tōng)過調用操作(zuò)系統Native GUI的API繪制(zhì)，将各個(gè)節點繪制(zhì)到屏幕上(shàng)。
于是就來(lái)到了繪制(zhì)網頁的最後階段。
五、繪制(zhì)網頁

浏覽器(qì)根據html和(hé)css計(jì)算(suàn)得(de)到渲染樹(shù)之後，将渲染好的頁面圖像顯示出來(lái)，即繪制(zhì)網頁，并開(kāi)始響應用戶的操作(zuò)。

六、後記

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