• scheme - 定義因特網(wǎng)服務(wù)的類(lèi)型。常見(jiàn)的協(xié)議有http、https、ftp、file，其中最常見(jiàn)的類(lèi)型是 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 - 定義文檔/資源的名稱(chēng)

二、域名解析(DNS)

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

我們先來(lái)了解下什么是IP地址

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

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

域名解析流程

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

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

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

服務(wù)器

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

web server 擔(dān)任管控的角色，對(duì)于不同用戶(hù)發(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ù)器和客戶(hù)端區(qū)別

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

網(wǎng)站處理，就是實(shí)際后臺(tái)處理的工作。后臺(tái)開(kā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)

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

2、模型(model)

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

3、控制器(controller)

MVC.png

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

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

五、瀏覽器的處理

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

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

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

六、繪制網(wǎng)頁(yè)

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