摘要：五瀏覽器繪制網(wǎng)頁繪制過程主要是結(jié)構(gòu)與樣式的結(jié)合，以及行為動(dòng)態(tài)效果的展現(xiàn)。之后會(huì)寫系列文章，歡迎圍觀主要參考文章基礎(chǔ)進(jìn)階詳解與編碼前端面試題從到頁面展現(xiàn)，這之中發(fā)生了什么圖解

地址欄輸入U(xiǎn)RL ——> 域名解析 ——> 服務(wù)器處理請(qǐng)求 ——> 瀏覽器處理響應(yīng) ——> 瀏覽器繪制網(wǎng)頁

URL定義：
（Uniform Resource Locator），統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上的資源，實(shí)際上就是網(wǎng)站網(wǎng)址。

URL與URI：URI 屬于 URL 更低層次的抽象，是一種字符串文本標(biāo)準(zhǔn)。就是說，URI 屬于父類，而 URL 屬于 URI 的子類。URL 是 URI 的一個(gè)子集。二者的區(qū)別在于，URI 表示請(qǐng)求服務(wù)器的路徑，定義這么一個(gè)資源。而 URL 同時(shí)說明要如何訪問這個(gè)資源（http://）。

URL標(biāo)準(zhǔn)格式：
URL由三部分組成：資源類型、存放資源的主機(jī)域名、資源文件名。

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

scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http、https、ftp等。

host - 定義域主機(jī)（省略時(shí)取默認(rèn)值，http/https的默認(rèn)主機(jī)是www）

domain - 定義因特網(wǎng)域名，比如w3school.com.cn

:port - 定義主機(jī)上的端口號(hào)（省略時(shí)取默認(rèn)值，http的默認(rèn)端口號(hào)是80）

path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）

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

例如，我的segmentfault個(gè)人主頁為 https://segmentfault.com/u/je... ，其中，https表示與web服務(wù)器通訊采用https協(xié)議，segmentfault的web服務(wù)器域名為www.segmentfault.com，省略了域主機(jī)host(www)，端口號(hào)取了默認(rèn)值80，/u指定了我的個(gè)人主頁在服務(wù)器上的存放路徑，/jerry_fe指定了我的個(gè)人主頁在服務(wù)器中的文檔名稱。

端口號(hào)的存在意義：
一臺(tái)主機(jī)常常會(huì)同時(shí)作為Web、FTP等服務(wù)器，端口編號(hào)用來告訴web服務(wù)器所在的主機(jī)要將請(qǐng)求交給哪個(gè)服務(wù)器。默認(rèn)情況下http服務(wù)的端口為80，不需要在url中輸入，如果web服務(wù)器采用的不是這一個(gè)默認(rèn)端口，就需要寫明服務(wù)器所用的端口。常見的協(xié)議默認(rèn)端口如下：

每個(gè)拋頭露面的域名背后總有一個(gè)低調(diào)內(nèi)斂的IP。
IP是因特網(wǎng)中每臺(tái)計(jì)算機(jī)為實(shí)現(xiàn)相互通信而遵循的規(guī)則協(xié)議。每個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有IP地址，每個(gè)網(wǎng)站就是靠服務(wù)器的IP地址來定位的。

域名可以理解成“為了方便記憶而為IP地址起的一個(gè)小名”，人們使用域名來登錄網(wǎng)站，每個(gè)域名背后有對(duì)應(yīng)的IP地址。

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

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

具體來說：

查找瀏覽器緩存
瀏覽器查找緩存中是否之前解析過并緩存了這個(gè)域名的IP地址。
如果有，瀏覽器獲得該IP，解析過程結(jié)束，如果沒有，繼續(xù)查找操作系統(tǒng)緩存。

查找操作系統(tǒng)緩存
瀏覽器查找操作系統(tǒng)hosts文件中是否有目標(biāo)域名和對(duì)應(yīng)的IP地址。
如果有，瀏覽器獲得該IP，解析過程結(jié)束，如果沒有，繼續(xù)查找路由器緩存。

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

查找本地DNS緩存
網(wǎng)絡(luò)配置中都會(huì)有"DNS服務(wù)器地址"這一項(xiàng)，瀏覽器會(huì)把這個(gè)域名發(fā)送給這里設(shè)置的DNS服務(wù)器，也就是本地區(qū)的域名服務(wù)器，通常是提供給你接入互聯(lián)網(wǎng)的應(yīng)用提供商。114.114.114.114是國內(nèi)移動(dòng)、電信和聯(lián)通通用的DNS。
如果有，瀏覽器獲得該IP，解析過程結(jié)束，如果沒有，繼續(xù)進(jìn)行遞歸查找。

遞歸查找

本地DNS服務(wù)器將目標(biāo)域名轉(zhuǎn)發(fā)到互聯(lián)網(wǎng)上的根域

根域?qū)⑺樵冇蛎械捻敿?jí)域（比如www.baidu.com的頂級(jí)域就是com）的服務(wù)器IP地址返回給本地DNS。

本地DNS根據(jù)返回的頂級(jí)域IP地址，向頂級(jí)域服務(wù)器發(fā)送目標(biāo)域名，頂級(jí)域服務(wù)器再將域名中的二級(jí)域（比如www.baidu.com的二級(jí)域?yàn)閎aidu.com）的服務(wù)器IP地址返回給本地DNS。

本地DNS根據(jù)返回的二級(jí)域IP地址，向二級(jí)域服務(wù)器發(fā)送目標(biāo)域名，重復(fù)這樣的過程，直到本地DNS獲得完整的服務(wù)器IP地址，并返回給瀏覽器。
下圖展示了完整的遞歸查詢過程：

瀏覽器獲得完整的服務(wù)器IP地址后，域名解析環(huán)節(jié)完成。之后，瀏覽器通過IP地址查找到對(duì)應(yīng)的服務(wù)器，并將用戶發(fā)起的http請(qǐng)求發(fā)送給服務(wù)器。

服務(wù)器上安裝了處理http請(qǐng)求的應(yīng)用 —— web server，常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。

當(dāng)web server接收到一個(gè)HTTP請(qǐng)求(request)，會(huì)結(jié)合配置文件，把不同請(qǐng)求委托給服務(wù)器上處理對(duì)應(yīng)請(qǐng)求的程序進(jìn)行處理（例如CGI腳本、JSP腳本、servlets、ASP腳本、服務(wù)器端JavaScript、或者一些其它的服務(wù)器端技術(shù)等）。不管是哪種腳本，這些服務(wù)器端(server-side)程序都會(huì)產(chǎn)生一個(gè)http響應(yīng)(response)，例如送回一個(gè)HTML頁面，來讓瀏覽器可以展現(xiàn)。

完成處理過程的代碼框架，大部分是按照MVC設(shè)計(jì)模式搭建的，實(shí)際處理過程如下圖：

MVC的處理過程是這樣的：每個(gè)用戶輸入的請(qǐng)求，首先被控制器(C)接收，控制器決定用哪個(gè)模型(M)來處理，然后模型用業(yè)務(wù)邏輯來處理用戶的請(qǐng)求，再然后控制器決定用哪個(gè)視圖模型(V)來接收模型處理后的數(shù)據(jù)，最后由該視圖模型對(duì)應(yīng)的視圖格式化模型來返回HTML字符串給瀏覽器。

瀏覽器接收到后臺(tái)返回的HTML字符串后，會(huì)依次經(jīng)歷：加載、解析、渲染。

加載
瀏覽器對(duì)一個(gè)html頁面的加載順序是從上而下的。
當(dāng)加載到外部css文件、圖片等資源，瀏覽器會(huì)再發(fā)起一次http請(qǐng)求，來獲取外部資源。
當(dāng)加載到j(luò)s文件，html文檔會(huì)掛起渲染（加載解析渲染同步）的線程，等待js文件加載、解析完畢才可以恢復(fù)html文檔的渲染線程。

解析
解析文檔是指將文檔轉(zhuǎn)化成為有意義的代碼。
HTML解析得到的是DOM樹，也稱節(jié)點(diǎn)樹，如下圖：

css解析得到的是樣式表對(duì)象，如下圖：

js是一種動(dòng)態(tài)語言，無需編譯，其解析過程即為其“預(yù)編譯”、“預(yù)處理”過程。
深入理解瀏覽器的解析過程，請(qǐng)參閱[瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘][2]

渲染
構(gòu)建渲染樹的過程，就是將DOM樹進(jìn)行可視化表示。構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容。

繪制過程主要是html(結(jié)構(gòu))與css(樣式)的結(jié)合，以及js(行為)動(dòng)態(tài)效果的展現(xiàn)。
css是通過選擇器與html結(jié)合的，html自身不帶有任何樣式。（之后會(huì)寫css系列文章，歡迎圍觀）

基礎(chǔ)進(jìn)階URL詳解與URL編碼
前端面試題：從url到頁面展現(xiàn)，這之中發(fā)生了什么？
HTTP圖解