完全理解從輸入URL與頁面展示

流程概述：

地址欄輸入URL ——> 域名解析 ——> 服務器處理請求 ——> 瀏覽器處理響應 ——> 瀏覽器繪製網頁

一.地址欄輸入URL

認識URL

URL定義：
（Uniform Resource Locator），統一資源定位符，用於定位互聯網上的資源，實際上就是網站網址。

URL與URI：URI 屬於 URL 更低層次的抽象，是一種字符串文本標準。就是說，URI 屬於父類，而 URL 屬於 URI 的子類。URL 是 URI 的一個子集。兩者的區別在於，URI 表示請求服務器的路徑，定義這麼一個資源。而 URL 同時說明要如何訪問這個資源（http://）。

URL標準格式：
URL由三部分組成：資源類型、存放資源的主機域名、資源文件名。

scheme://host.domain[:port]/path/filename

• scheme - 定義因特網服務的類型。最多見的類型是 http、https、ftp等。

• host - 定義域主機（省略時取默認值，http/https的默認主機是www）

• domain - 定義因特網域名，好比w3school.com.cn

• :port - 定義主機上的端口號（省略時取默認值，http的默認端口號是80）

• path - 定義服務器上的路徑（若是省略，則文檔必須位於網站的根目錄中）

• filename - 定義文檔/資源的名稱

例如，個人segmentfault我的主頁爲 https://segmentfault.com/u/je... ，其中，https表示與web服務器通信採用https協議，segmentfault的web服務器域名爲www.segmentfault.com，省略了域主機host(www)，端口號取了默認值80，/u指定了個人我的主頁在服務器上的存放路徑，/jerry_fe指定了個人我的主頁在服務器中的文檔名稱。

端口號的存在乎義：
一臺主機經常會同時做爲Web、FTP等服務器，端口編號用來告訴web服務器所在的主機要將請求交給哪一個服務器。默認狀況下http服務的端口爲80，不須要在url中輸入，若是web服務器採用的不是這一個默認端口，就須要寫明服務器所用的端口。常見的協議默認端口以下：

協議類型	默認端口
http	80
ftp	21
https	443
telnet	23

認識IP地址

每一個拋頭露面的域名背後總有一個低調內斂的IP。
IP是因特網中每臺計算機爲實現相互通訊而遵循的規則協議。每一個處於互聯網中的設備都有IP地址，每一個網站就是靠服務器的IP地址來定位的。

域名能夠理解成「爲了方便記憶而爲IP地址起的一個小名」，人們使用域名來登陸網站，每一個域名背後有對應的IP地址。

例如segmentfault的URL爲https://segmentfault.com，其域名爲 segmentfault.com，其實瀏覽器並不知道segmentfault.com是什麼，要訪問該網站，就須要查找segmentfault.com域名所表明的IP地址（即segmentfault網站服務器的IP地址），這個查找的過程即爲域名解析。

二.域名解析

域名解析是一個層級查找的過程：
查找瀏覽器緩存 ——> 查找操做系統緩存 ——> 查找路由器緩存 ——> 查找本地DNS緩存 ——> 遞歸查詢
（DNS：域名和IP地址相互映射的一個分佈式數據庫）

具體來講：

1. 查找瀏覽器緩存
   瀏覽器查找緩存中是否以前解析過並緩存了這個域名的IP地址。
   若是有，瀏覽器得到該IP，解析過程結束，若是沒有，繼續查找操做系統緩存。

2. 查找操做系統緩存
   瀏覽器查找操做系統hosts文件中是否有目標域名和對應的IP地址。
   若是有，瀏覽器得到該IP，解析過程結束，若是沒有，繼續查找路由器緩存。

3. 查找路由器緩存
   瀏覽器在路由器緩存中查找，路由器通常會有本身的DNS緩存。
   若是有，瀏覽器得到該IP，解析過程結束，若是沒有，繼續查找本地DNS緩存。

4. 查找本地DNS緩存
   網絡配置中都會有"DNS服務器地址"這一項，瀏覽器會把這個域名發送給這裏設置的DNS服務器，也就是本地區的域名服務器，一般是提供給你接入互聯網的應用提供商。114.114.114.114是國內移動、電信和聯統統用的DNS。
   若是有，瀏覽器得到該IP，解析過程結束，若是沒有，繼續進行遞歸查找。

5. 遞歸查找

   • 本地DNS服務器將目標域名轉發到互聯網上的根域

   • 根域將所要查詢域名中的頂級域（好比www.baidu.com的頂級域就是com）的服務器IP地址返回給本地DNS。

   • 本地DNS根據返回的頂級域IP地址，向頂級域服務器發送目標域名，頂級域服務器再將域名中的二級域（好比www.baidu.com的二級域爲baidu.com）的服務器IP地址返回給本地DNS。

   • 本地DNS根據返回的二級域IP地址，向二級域服務器發送目標域名，重複這樣的過程，直到本地DNS得到完整的服務器IP地址，並返回給瀏覽器。
     下圖展現了完整的遞歸查詢過程：

瀏覽器得到完整的服務器IP地址後，域名解析環節完成。以後，瀏覽器經過IP地址查找到對應的服務器，並將用戶發起的http請求發送給服務器。

三.服務器處理請求

服務器上安裝了處理http請求的應用 —— web server，常見的web server產品有apache、nginx、IIS、Lighttpd等。

當web server接收到一個HTTP請求(request)，會結合配置文件，把不一樣請求委託給服務器上處理對應請求的程序進行處理（例如CGI腳本、JSP腳本、servlets、ASP腳本、服務器端JavaScript、或者一些其它的服務器端技術等）。不論是哪一種腳本，這些服務器端(server-side)程序都會產生一個http響應(response)，例如送回一個HTML頁面，來讓瀏覽器能夠展示。

完成處理過程的代碼框架，大部分是按照MVC設計模式搭建的，實際處理過程以下圖：

MVC的處理過程是這樣的：每一個用戶輸入的請求，首先被控制器(C)接收，控制器決定用哪一個模型(M)來處理，而後模型用業務邏輯來處理用戶的請求，再而後控制器決定用哪一個視圖模型(V)來接收模型處理後的數據，最後由該視圖模型對應的視圖格式化模型來返回HTML字符串給瀏覽器。

四.瀏覽器處理響應

瀏覽器接收到後臺返回的HTML字符串後，會依次經歷：加載、解析、渲染。

• 加載
  瀏覽器對一個html頁面的加載順序是從上而下的。
  當加載到外部css文件、圖片等資源，瀏覽器會再發起一次http請求，來獲取外部資源。
  當加載到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，等待js文件加載、解析完畢才能夠恢復html文檔的渲染線程。

• 解析
  解析文檔是指將文檔轉化成爲有意義的代碼。
  HTML解析獲得的是DOM樹，也稱節點樹，以下圖：

css解析獲得的是樣式表對象，以下圖：

js是一種動態語言，無需編譯，其解析過程即爲其「預編譯」、「預處理」過程。
深刻理解瀏覽器的解析過程，請參閱[瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕][2]

• 渲染
  構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是爲了以正確的順序繪製文檔內容。

五.瀏覽器繪製網頁

繪製過程主要是html(結構)與css(樣式)的結合，以及js(行爲)動態效果的展示。
css是經過選擇器與html結合的，html自身不帶有任何樣式。（以後會寫css系列文章，歡迎圍觀）

主要參考文章：

基礎進階URL詳解與URL編碼
前端面試題：從url到頁面展示，這之中發生了什麼？
HTTP圖解