前言

打開瀏覽器從輸入網(wǎng)址到網(wǎng)面呈現(xiàn)在大家面前，背后到底發(fā)生了什么?經(jīng)歷怎么樣的一個(gè)過程?這是本文要探討的問題!

一、URL到底是啥

URL(Uniform Resource Locator)，統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上資源，俗稱網(wǎng)址。

比如 http://www.w3school.com.cn/html/index.asp，遵守以下的語法規(guī)則：scheme://host.domain:port/path/filename

解釋：

• scheme - 定義因特網(wǎng)服務(wù)的類型。常見的協(xié)議有http、https、ftp、file，其中最常見的類型是 http，而https則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。
• host - 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www)
• domain - 定義因特網(wǎng)域名，比如 w3school.com.cn
• :port - 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80)
• path - 定義服務(wù)器上的路徑(如果省略，則文檔必須位于網(wǎng)站的根目錄中)。
• filename - 定義文檔/資源的名稱

二、域名解析(DNS)

在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因?yàn)闉g覽器并不能識(shí)別域名，需要通過域名直接找到相應(yīng)的IP地址，大家這里或許會(huì)有個(gè)疑問----為啥要設(shè)置域名，不如一開始就給個(gè)IP地址，這樣可以省去很多麻煩。

我們先來了解下什么是IP地址

IP地址是指互聯(lián)網(wǎng)協(xié)議地址，是IP Address的縮寫。IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配一個(gè)邏輯地址，以此來屏蔽物理地址的差異。IP地址是一個(gè)32位的二進(jìn)制數(shù)，比如127.0.0.1為本機(jī)IP;如果每個(gè)網(wǎng)址都是一串?dāng)?shù)字，那就不便于記憶!

域名就相當(dāng)于IP地址喬裝打扮的偽裝者，帶著一副面具。它的作用就是便于記憶和溝通的一組服務(wù)器的地址。但這樣有時(shí)候會(huì)帶來一種風(fēng)險(xiǎn)----DNS劫持，就是使域名對(duì)應(yīng)的不再是原本對(duì)應(yīng)的IP，其效果就是對(duì)特定的網(wǎng)絡(luò)不能訪問或訪問的是假網(wǎng)址，又難于被用戶發(fā)覺，曾導(dǎo)致巴西最大銀行巴西銀行近1%客戶受到攻擊而導(dǎo)致賬戶被盜。

域名解析流程

• 瀏覽器緩存：如果在之前對(duì)該url指定的主機(jī)進(jìn)行過訪問，瀏覽器會(huì)緩存該主機(jī)的IP一段時(shí)間(該時(shí)間瀏覽器指定)，然后通過該IP地址找到對(duì)應(yīng)主機(jī);
• 系統(tǒng)緩存：若瀏覽器中無該緩存，那么就到系統(tǒng)緩存中進(jìn)行查詢，瀏覽器會(huì)進(jìn)行系統(tǒng)調(diào)用，查詢緩存;
• 路由器緩存：如果系統(tǒng)緩存中也沒有，那么就到路由器緩存中進(jìn)行查詢;
• ISP DNS 緩存：如果路由器緩存依舊未命中，那么就到ISP DNS中查詢，一般的域名都能在這里查詢得到;
• 遞歸搜索：如果以上都沒有查詢到，那么就會(huì)到頂級(jí)域名服務(wù)器的根服務(wù)器中進(jìn)行遞歸查詢，只要該域名存在就肯定能找得到。

通過域名解析查找到對(duì)應(yīng)的IP地址之后，通過IP地址查找到對(duì)應(yīng)的服務(wù)器，瀏覽器將用戶發(fā)起的http請(qǐng)求發(fā)送給服務(wù)器。下一步就到了服務(wù)器處理階段的工作。

三、服務(wù)器處理響應(yīng)請(qǐng)求

服務(wù)器

服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計(jì)算機(jī)，它偵聽網(wǎng)絡(luò)上的其他計(jì)算機(jī)(客戶機(jī))提交的服務(wù)請(qǐng)求，并提供相應(yīng)的服務(wù)，比如網(wǎng)頁服務(wù)、文件下載服務(wù)、郵件服務(wù)、視頻服務(wù)。而客戶端主要的功能是瀏覽網(wǎng)頁、看視頻、聽音樂等等，兩者截然不同。 每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——web server。常見的web server產(chǎn)品有apache、nginx、IIS或Lighttpd等。

web server 擔(dān)任管控的角色，對(duì)于不同用戶發(fā)送的請(qǐng)求，會(huì)結(jié)合配置文件，把不同請(qǐng)求委托給服務(wù)器上處理相應(yīng)請(qǐng)求的程序進(jìn)行處理(例如CGI腳本，JSP腳本，servlets，ASP腳本，服務(wù)器端JavaScript，或者一些其它的服務(wù)器端技術(shù)等)，然后返回后臺(tái)程序處理產(chǎn)生的結(jié)果作為響應(yīng)。

服務(wù)器和客戶端區(qū)別

四、網(wǎng)站處理階段

網(wǎng)站處理，就是實(shí)際后臺(tái)處理的工作。后臺(tái)開發(fā)現(xiàn)在有很多框架，但大部分都還是按照MVC設(shè)計(jì)模式進(jìn)行搭建的。

MVC是一個(gè)設(shè)計(jì)模式，將應(yīng)用程序分成三個(gè)核心部件：模型(model)-- 視圖(view)--控制器(controller)，它們各自處理自己的任務(wù)，實(shí)現(xiàn)輸入、處理和輸出的分離。

1、視圖(view)

視圖是用戶看到并與之交互的界面。

2、模型(model)

模型表示企業(yè)數(shù)據(jù)和業(yè)務(wù)規(guī)則。在MVC的三個(gè)部件中，模型擁有最多的處理任務(wù)。一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)。

3、控制器(controller)

MVC.png

控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求?？刂破鲗儆诠芾碚呓巧瑥囊晥D接收請(qǐng)求并決定調(diào)用哪個(gè)模型構(gòu)件去處理請(qǐng)求，然后再確定用哪個(gè)視圖來顯示模型處理返回的數(shù)據(jù)。

總結(jié)而言，首先控制器接收用戶的請(qǐng)求，并決定應(yīng)該調(diào)用哪個(gè)模型來進(jìn)行處理，然后模型用業(yè)務(wù)邏輯來處理用戶的請(qǐng)求并返回?cái)?shù)據(jù)，最后控制器用相應(yīng)的視圖格式化模型返回HTML字符串給瀏覽器，瀏覽器呈現(xiàn)網(wǎng)頁給用戶。因此，下一步就來到瀏覽器處理階段。

五、瀏覽器的處理

瀏覽器拿到響應(yīng)文本HTML后，以chrome瀏覽器為例，介紹下瀏覽器渲染機(jī)制

chrome瀏覽器渲染機(jī)制

• 處理 HTML 標(biāo)記并構(gòu)建 DOM 樹。
• 處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹。
• 將 DOM 與 CSSOM 合并成一個(gè)渲染樹(render 樹)。
• 根據(jù)渲染樹來布局，以計(jì)算每個(gè)節(jié)點(diǎn)(也就是每個(gè)Element)的幾何位置,這又叫l(wèi)ayout和reflow過程。
• 最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制,將各個(gè)節(jié)點(diǎn)繪制到屏幕上。
• 于是就來到了繪制網(wǎng)頁的最后階段。

六、繪制網(wǎng)頁

瀏覽器根據(jù)html和css計(jì)算得到渲染樹之后，將渲染好的頁面圖像顯示出來，即繪制網(wǎng)頁，并開始響應(yīng)用戶的操作。。