摘要：五瀏覽器繪制網頁繪制過程主要是結構與樣式的結合，以及行為動態效果的展現。之后會寫系列文章，歡迎圍觀主要參考文章基礎進階詳解與編碼前端面試題從到頁面展現，這之中發生了什么圖解

地址欄輸入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服務器采用的不是這一個默認端口，就需要寫明服務器所用的端口。常見的協議默認端口如下：

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

域名可以理解成“為了方便記憶而為IP地址起的一個小名”，人們使用域名來登錄網站，每個域名背后有對應的IP地址。

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

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

具體來說：

查找瀏覽器緩存
瀏覽器查找緩存中是否之前解析過并緩存了這個域名的IP地址。
如果有，瀏覽器獲得該IP，解析過程結束，如果沒有，繼續查找操作系統緩存。

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

查找路由器緩存
瀏覽器在路由器緩存中查找，路由器一般會有自己的DNS緩存。
如果有，瀏覽器獲得該IP，解析過程結束，如果沒有，繼續查找本地DNS緩存。

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

遞歸查找

本地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圖解