在瀏覽器中輸入U(xiǎn)RL到整個(gè)頁(yè)面顯示在用戶(hù)面前這個(gè)過(guò)程大致可以被分為以下幾個(gè)階段：

1. 域名解析
2. 服務(wù)器處理
3. 網(wǎng)站處理
4. 瀏覽器處理與繪制

URL的定義

URL（Uniform Resource Locator），即統(tǒng)一資源定位符，是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址（網(wǎng)址）。互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。

基本URL包含模式（或稱(chēng)協(xié)議）、服務(wù)器名稱(chēng)（或IP地址）、路徑和文件名，如“協(xié)議://授權(quán)/路徑查詢(xún)”。完整的、帶有授權(quán)部分的普通統(tǒng)一資源標(biāo)志符語(yǔ)法看上去如下：協(xié)議://用戶(hù)名:密碼@子域名.域名.頂級(jí)域名:端口號(hào)/目錄/文件名.文件后綴?參數(shù)=值#標(biāo)志

URL常用協(xié)議有:

• http——超文本傳輸協(xié)議資源
• https——用安全套接字層傳送的超文本傳輸協(xié)議（加密）
• ftp——文件傳輸協(xié)議
• mailto——電子郵件地址
• file——當(dāng)?shù)仉娔X或網(wǎng)上分享的文件

具體過(guò)程介紹

一、域名解析

互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址，但是IP地址并不方便記憶。用戶(hù)更喜歡用方便記憶的網(wǎng)址去尋找互聯(lián)網(wǎng)上的其它計(jì)算機(jī)。所以互聯(lián)網(wǎng)設(shè)計(jì)者需要在用戶(hù)的方便性與可用性方面做一個(gè)權(quán)衡，這個(gè)權(quán)衡就是一個(gè)網(wǎng)址到IP地址的轉(zhuǎn)換，這個(gè)過(guò)程就是域名解析。它實(shí)際上充當(dāng)了一個(gè)翻譯的角色，實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換。域名的解析工作由DNS服務(wù)器完成。

IP 地址：IP 協(xié)議為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配的一個(gè)邏輯地址。IP 地址如同門(mén)牌號(hào)碼，通過(guò) IP 地址才能確定一臺(tái)主機(jī)位置。服務(wù)器本質(zhì)也是一臺(tái)主機(jī)，想要訪問(wèn)某個(gè)服務(wù)器，必須先知道它的 IP 地址

域名（ DN ）：IP 地址由四個(gè)數(shù)字組成，中間用點(diǎn)號(hào)連接，在使用過(guò)程中難記憶且易輸入錯(cuò)誤，所以用我們熟悉的字母和數(shù)字組合來(lái)代替純數(shù)字的 IP 地址，比如我們只會(huì)記住 www.baidu.com（百度域名） 而不是 220.181.112.244（百度的其中一個(gè) IP 地址）。

DNS： 每個(gè)域名都對(duì)應(yīng)一個(gè)或多個(gè)提供相同服務(wù)服務(wù)器的 IP 地址，只有知道服務(wù)器 IP 地址才能建立連接，所以需要通過(guò) DNS 把域名解析成一個(gè) IP 地址。

具體流程

1. 瀏覽器搜索自己的DNS緩存 – 瀏覽器會(huì)緩存DNS記錄一段時(shí)間
2. 搜索操作系統(tǒng)中的Hosts文件 - 從 Hosts 文件查找是否有該域名和對(duì)應(yīng) IP。
3. 搜索路由器緩存 – 一般路由器也會(huì)緩存域名信息。
4. 搜索ISP DNS 緩存 （ISP:互聯(lián)網(wǎng)服務(wù)提供商）– 比如到電信的 DNS 上查找緩存。
   如果都沒(méi)有找到，則向根域名服務(wù)器查找域名對(duì)應(yīng) IP，根域名服務(wù)器把請(qǐng)求轉(zhuǎn)發(fā)到下一級(jí)，直到找到 IP

小知識(shí)：

1. 8.8.8.8 ：8.8.8.8是一個(gè)IP地址，是Google提供的免費(fèi)DNS服務(wù)器的IP地址
   114.114.114.114 ：是國(guó)內(nèi)第一個(gè)、全球第三個(gè)開(kāi)放的DNS服務(wù)地址,又稱(chēng)114DNS
2. DNS劫持：
   DNS劫持又稱(chēng)域名劫持，是指在劫持的網(wǎng)絡(luò)范圍內(nèi)攔截域名解析的請(qǐng)求，分析請(qǐng)求的域名，把審查范圍以外的請(qǐng)求放行，否則返回假的IP地址或者什么都不做使請(qǐng)求失去響應(yīng)，其效果就是對(duì)特定的網(wǎng)絡(luò)不能反應(yīng)或訪問(wèn)的是假網(wǎng)址。

二、服務(wù)器處理

服務(wù)器是一臺(tái)安裝系統(tǒng)的機(jī)器，常見(jiàn)的系統(tǒng)如Linux、windows server 2012等系統(tǒng)里安裝的處理請(qǐng)求的應(yīng)用叫 Web server（web服務(wù)器）
常見(jiàn)的 web服務(wù)器有 Apache、Nginx、IIS、Lighttpd
web服務(wù)器接收用戶(hù)的Request 交給網(wǎng)站代碼，或者接受請(qǐng)求反向代理到其他 web服務(wù)器

** 饑人谷服務(wù)器處理過(guò)程示意圖**

三、網(wǎng)站處理

**MVC架構(gòu)網(wǎng)站處理示意圖**.png

MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫(xiě)，一種軟件設(shè)計(jì)典范，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面，在改進(jìn)和個(gè)性化定制界面及用戶(hù)交互的同時(shí)，不需要重新編寫(xiě)業(yè)務(wù)邏輯。MVC被獨(dú)特的發(fā)展起來(lái)用于映射傳統(tǒng)的輸入、處理和輸出功能在一個(gè)邏輯的圖形化用戶(hù)界面的結(jié)構(gòu)中。

• Model（模型）：是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫(kù)中存取數(shù)據(jù)。
• View（視圖）：是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。，通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。（前端工程師主要負(fù)責(zé)）
• Controller（控制器）：是應(yīng)用程序中處理用戶(hù)交互的部分，通常控制器負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶(hù)輸入，并向模型發(fā)送數(shù)據(jù)。

四、瀏覽器處理與繪制

解析過(guò)程：

• HTML字符串被瀏覽器接受后被一句句讀取解析
• 解析到link 標(biāo)簽后重新發(fā)送請(qǐng)求獲取css；解析到 script標(biāo)簽后發(fā)送請(qǐng)求獲取 js，并執(zhí)行代碼
• 解析到img 標(biāo)簽后發(fā)送請(qǐng)求獲取圖片資源

繪制過(guò)程：

• 瀏覽器根據(jù) HTML 和 CSS 計(jì)算得到渲染樹(shù)，繪制到屏幕上，js 會(huì)被執(zhí)行

解析順序：

• 瀏覽器是一個(gè)邊解析邊渲染的過(guò)程。首先瀏覽器解析HTML文件構(gòu)建DOM樹(shù)，然后解析CSS文件構(gòu)建渲染樹(shù)，等到渲染樹(shù)構(gòu)建完成后，瀏覽器開(kāi)始布局渲染樹(shù)并將其繪制到屏幕上。
• JS的解析是由瀏覽器中的JS解析引擎完成的。JS是單線程運(yùn)行，也就是說(shuō)，在同一個(gè)時(shí)間內(nèi)只能做一件事，所有的任務(wù)都需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，后一個(gè)任務(wù)才能開(kāi)始。
• 瀏覽器在解析過(guò)程中，如果遇到請(qǐng)求外部資源時(shí)請(qǐng)求過(guò)程是異步的，并不會(huì)影響HTML文檔進(jìn)行加載，但是當(dāng)文檔加載過(guò)程中遇到JS文件，HTML文檔會(huì)掛起渲染過(guò)程，不僅要等到文檔中JS文件加載完畢還要等待解析執(zhí)行完畢，才會(huì)繼續(xù)HTML的渲染過(guò)程。原因是因?yàn)镴S有可能修改DOM結(jié)構(gòu)，這就意味著JS執(zhí)行完成前，后續(xù)所有資源的下載是沒(méi)有必要的，這就是JS阻塞后續(xù)資源下載的根本原因。CSS文件的加載不影響JS文件的加載，但是卻影響JS文件的執(zhí)行。JS代碼執(zhí)行前瀏覽器必須保證CSS文件已經(jīng)下載并加載完畢。