打開瀏覽器從輸入網址到網頁呈現在大家面前，背後到底發生了什麼？經歷怎麼樣的一個過程？
先給大家來張總體流程圖，具體步驟請看下文分解！
從URL輸入到頁面展現
一、URL到底是啥
URL（Uniform Resource Locator），統一資源定位符，用於定位互聯網上資源，俗稱網址。比如： http://www.w3school.com.cn/html/index.asp，遵守以下的語法規則scheme://host.domain:port/path/filename
各部分解釋如下：
- scheme – 定義因特網服務的類型。常見的協議有http、https、ftp、file，其中最常見的類型是 http，而https則是進行加密的網絡傳輸。
- host – 定義域主機（http 的默認主機是 www）。
- domain – 定義因特網域名，比如 w3school.com.cn。
- port – 定義主機上的端口號（http 的默認端口號是 80）。
- path – 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
- filename – 定義文檔/資源的名稱。
二、域名解析（DNS）
在瀏覽器輸入網址後，首先要經過域名解析，因為瀏覽器並不能識別域名，需要通過域名直接找到相應的IP地址。大家這裡或許會有個疑問——為啥要設置域名？怎麼不一開始就給個IP地址？這樣可以省去解析麻煩。
我們先來了解下什麼是IP地址？
1. IP地址
IP地址是指互聯網協議地址，是IP Address的縮寫。IP地址是IP協議提供的一種統一的地址格式，它為互聯網上的每一個網絡和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。IP地址是一個32位的二進制數，比如：127.0.0.1為本機IP，如果每個網址都是一串數字，那就不便於記憶!
域名就相當於IP地址喬裝打扮的偽裝者，帶著一副面具，它的作用就是便於記憶和溝通的一組服務器的地址。
但這樣有時候會帶來一種風險——DNS劫持，就是使域名對應的不再是原本對應的IP，其效果就是對特定的網絡不能訪問或訪問的是假網址，又難於被用戶發覺，曾導致巴西最大銀行巴西銀行近1%客戶受到攻擊而導致賬戶被盜。
2. 什麼是域名解析
DNS是一個網絡服務器，我們的域名解析簡單來說就是在DNS上記錄一條信息記錄。例如：baidu.com 220.114.23.56（服務器外網IP地址）80（服務器端口號）。
瀏覽器通過向DNS服務器發送域名，DNS服務器查詢到與域名相對應的IP地址，然後返回給瀏覽器，瀏覽器再將IP地址打在協議上，同時請求參數也會在協議搭載，然後一併發送給對應的服務器，下一步就到了服務器處理階段的工作。
3. 域名解析流程
- 瀏覽器緩存：如果在之前對該url指定的主機進行過訪問，瀏覽器會緩存該主機的IP一段時間（該時間瀏覽器指定），然後通過該IP地址找到對應主機；
- 系統緩存：若瀏覽器中無該緩存，那麼就到系統緩存中進行查詢，瀏覽器會進行系統調用，查詢緩存；
- 路由器緩存：如果系統緩存中也沒有，那麼就到路由器緩存中進行查詢；
- ISP DNS 緩存：如果路由器緩存依舊未命中，那麼就到ISP DNS中查詢，一般的域名都能在這裡查詢得到；
- 遞歸搜索：如果以上都沒有查詢到，那麼就會到頂級域名服務器的根服務器中進行遞歸查詢，只要該域名存在就肯定能找得到。
三、服務器處理響應請求
1. 服務器
服務器是網絡環境中的高性能計算機，它偵聽網絡上的其他計算機（客戶機）提交的服務請求，並提供相應的服務。比如：網頁服務、文件下載服務、郵件服務、視頻服務。
而客戶端主要的功能是瀏覽網頁、看視頻、聽音樂等等，兩者截然不同。 每臺服務器上都會安裝處理請求的應用——web server，常見的web server產品有apache、nginx、IIS或Lighttpd等。
web server 擔任管控的角色，對於不同用戶發送的請求，會結合配置文件，把不同請求委託給服務器上處理相應請求的程序進行處理（例如：CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等），然後返回後臺程序處理產生的結果作為響應。
服務器和客戶端區別
2. MVC後臺處理階段
後臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。
MVC是一個設計模式，將應用程序分成三個核心部件：模型（model）——視圖（view）——控制器（controller），它們各自處理自己的任務，實現輸入、處理和輸出的分離。
MVC架構
（1）視圖（view）
它是提供給用戶的操作界面，是程序的外殼。
（2）模型（model）
模型主要負責數據交互，在MVC的三個部件中，模型擁有最多的處理任務，一個模型能為多個視圖提供數據。
（3）控制器（controller）
它負責根據用戶從”視圖層”輸入的指令，選取”模型層”中的數據，然後對其進行相應的操作，產生最終結果。控制器屬於管理者角色，從視圖接收請求並決定調用哪個模型構件去處理請求，然後再確定用哪個視圖來顯示模型處理返回的數據。
這三層是緊密聯繫在一起的，但又是互相獨立的，每一層內部的變化不影響其他層，每一層都對外提供接口（Interface），供上面一層調用。
至於這一階段發生什麼？
簡而言之，首先瀏覽器發送過來的請求先經過控制器，控制器進行邏輯處理和請求分發，接著會調用模型。這一階段模型會獲取redis db以及MySQL的數據，獲取數據後將渲染好的頁面，通過視圖返回給瀏覽器，最後瀏覽器通過渲染引擎將網頁呈現在用戶面前。因此，下一步就來到瀏覽器處理階段
四、瀏覽器的處理
瀏覽器拿到響應文本HTML後，以chrome瀏覽器為例，介紹下瀏覽器渲染機制
chrome瀏覽器渲染機制：
- 處理 HTML 標記並構建 DOM 樹。
- 處理 CSS 標記並構建 CSSOM 樹。
- 將 DOM 與 CSSOM 合併成一個渲染樹（render 樹）。
- 根據渲染樹來佈局，以計算每個節點（也就是每個Element）的幾何位置，這又叫layout和reflow過程。
- 最後通過調用操作系統Native GUI的API繪製，將各個節點繪製到屏幕上。
- 於是就來到了繪製網頁的最後階段。
五、繪製網頁
瀏覽器根據html和css計算得到渲染樹之後，將渲染好的頁面圖像顯示出來，即繪製網頁，並開始響應用戶的操作。
六、後記
隨著學習的深入，對於頁面加載這個主題認識更加深刻，之前一些困惑點現在都迎刃而解。
原文鏈接：https://www.jianshu.com/p/40d76ebb94e2
題圖來自Unsplash，基於CCO協議
閱讀更多 人人都是產品經理 的文章
