從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計算得到渲染樹之后，將渲染好的頁面圖像顯示出來，即繪制網頁，并開始響應用戶的操作。
