上網(wǎng)已經(jīng)成為我們每個人生活中一項重要的內(nèi)容了，當(dāng)我們打開瀏覽器，在地址欄中輸入相應(yīng)的網(wǎng)址并按下了回車鍵，既會在頁面中呈現(xiàn)所需的相關(guān)信息。那么，在這背后都進(jìn)行了哪些技術(shù)步驟，才會將豐富的信息內(nèi)容加載出來，展現(xiàn)在我們眼前呢。

從URL的輸入到頁面的展現(xiàn)，大概會經(jīng)過以下幾個過程：

1. 在瀏覽器中輸入url
2. DNS域名解析
3. 服務(wù)器處理請求
4. 網(wǎng)站處理流程
5. 瀏覽器顯示頁面信息

一、在瀏覽器輸入URL

首先，我們來了解下URL的一些知識。

URL（Uniform Resource Locator,統(tǒng)一資源定位符）

由一串簡單的文本字符組成，他的作用是用于定位互聯(lián)網(wǎng)上資源的地址。URL通常由以下幾部分組成：傳輸協(xié)議、域名、端口、文件路徑。

以我的簡書主頁為例，“http://www.itdecent.cn/u/dc6b5792c956”這一串字符即為URL。

• 協(xié)議部分

通過特定的傳輸協(xié)議，獲得指定文檔的內(nèi)容。

該URL的協(xié)議部分為“ https: ”，這代表網(wǎng)頁使用的是https協(xié)議。在Internet中可以使用多種協(xié)議。常見的協(xié)議有：” http:// ” （超文本傳輸協(xié)議，信息是明文傳輸）、“ https:// ”（進(jìn)行加密的網(wǎng)絡(luò)傳輸協(xié)議）、" file:// "（本地文件傳輸協(xié)議，file協(xié)議主要用于訪問本地計算機中的文件）、" ftp:// "（文件傳輸協(xié)議），" mailto: "（資源為電子郵件地址，通過SMTP訪問）。還有一種URL前面沒有加指定協(xié)議，它是指獲取該資源需要使用的協(xié)議與當(dāng)前的URL是保持一致的。

• 域名部分

用來確定服務(wù)器在互聯(lián)網(wǎng)上的位置，域名的目的是便于記憶和溝通的一組服務(wù)器的地址，是唯一不可重復(fù)的。

該URL的域名部分為jianshu.com

• 端口部分

跟在域名后面的為端口編號，域名和端口之間使用“ ：”分隔開。默認(rèn)端口一般在URL中不展現(xiàn)。當(dāng)Web服務(wù)器采用的不是默認(rèn)端口時，就需要寫明服務(wù)所用的端口。端口號的作用，主要是區(qū)分服務(wù)類別和在同一時間進(jìn)行多個會話。

常用的應(yīng)用協(xié)議和對應(yīng)的端口號如下：

• 文件路徑

一般用來表示主機上的一個目錄或文件地址（即存儲的位置），由零或多個“ / ”符號隔開，劃分為多個層次進(jìn)行描述。

該URL的文件路徑為/u/dc6b5792c956

二、DNS域名解析

當(dāng)你在瀏覽器中輸入URL后，你使用的電腦會發(fā)出一個DNS請求（將域名轉(zhuǎn)化為IP地址的請求）。對于瀏覽器，實際上并不知道“http://www.itdecent.cn/u/dc6b5792c956”到底是什么東西，需要確認(rèn)其中域名所在服務(wù)器的IP地址才能找到目標(biāo)網(wǎng)站（瀏覽器需要對IP地址進(jìn)行識別，才能夠進(jìn)一步傳遞網(wǎng)址和信息內(nèi)容）。那么，將域名解析成對應(yīng)的服務(wù)器IP地址這項工作，就是由DNS服務(wù)器來完成。

DNS（Domain Name System，域名系統(tǒng)）

主要進(jìn)行將主機名和域名轉(zhuǎn)換為IP地址的工作。把便于用戶記憶的特定域名轉(zhuǎn)換成為能夠被機器直接讀取的IP數(shù)串。

IP地址（Internet Protocol Address，互聯(lián)網(wǎng)協(xié)議地址）

IP協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址。在互聯(lián)網(wǎng)中的每一臺主機都有IP地址，IP協(xié)議就是使用這個地址在主機之間傳遞信息，形如 192.168.0.1 。如果沒有IP地址，就無法找到相應(yīng)的主機進(jìn)行信息交換，這個設(shè)備也就無法連接到互聯(lián)網(wǎng)。

相關(guān)問題：

為什么要用域名，不直接使用IP地址？

• IP地址不容易記住，特定的域名，更加方便與用戶記憶或辨識。
• IP地址與域名并不是一對一的映射關(guān)系，一個域名后面可以對應(yīng)多臺設(shè)備的IP地址，一個IP地址也可以綁定多個域名。如果直接使用IP地址的話，可能無法準(zhǔn)確的定位你想要訪問的網(wǎng)站。

局域網(wǎng)IP與公網(wǎng)IP之間的區(qū)別

• 內(nèi)網(wǎng)也就是局域網(wǎng)，內(nèi)網(wǎng)的計算機以NAT（網(wǎng)絡(luò)地址轉(zhuǎn)換）協(xié)議，通過一個公共的網(wǎng)關(guān)訪問Internet。內(nèi)網(wǎng)的計算機可向Internet上的其他計算機發(fā)送連接請求，但I(xiàn)nternet上其他的計算機無法向內(nèi)網(wǎng)的計算機發(fā)送連接請求。
• 公網(wǎng)IP是處于整個互聯(lián)網(wǎng)可訪問的一個狀態(tài)當(dāng)中，公網(wǎng)IP都是需要購買的。

在同樣的局域網(wǎng)下，如果知道對方的IP就可以進(jìn)行訪問，公網(wǎng)IP是處于整個互聯(lián)網(wǎng)可訪問的狀態(tài)中。

域名解析的流程：

1. 查找瀏覽器緩存——我們?nèi)粘g覽網(wǎng)站時，瀏覽器會緩存DNS記錄一段時間。如果以前我們訪問過該網(wǎng)站，那么在瀏覽器中就會有相應(yīng)的緩存記錄。因此，我們輸入網(wǎng)址后，瀏覽器會首先檢查緩存中是否有該域名對應(yīng)的IP信息。如果有，則直接返回該信息供用戶訪問網(wǎng)站，如果查詢失敗，會從系統(tǒng)緩存中進(jìn)行查找。
2. 查找系統(tǒng)緩存——從hosts文件中查找是否有存儲的DNS信息（MAC端，可在“終端”中輸入命令cat etc/hosts找到hosts文件位置），如果查詢失敗，可從路由器緩存中繼續(xù)查找。
3. 查找路由器緩存——如果之前訪問過相應(yīng)的網(wǎng)站，一般路由器也會緩存信息。如果查詢失敗，可繼續(xù)從 ISP DNS 緩存查找。
4. 查找ISP DNS緩存——從網(wǎng)絡(luò)服務(wù)商（例如電信）的DNS緩存信息中查找。
5. 如果經(jīng)由以上方式都沒找到對應(yīng)IP的話，則像根域名服務(wù)器查找域名對應(yīng)的IP地址，根域名服務(wù)器把請求轉(zhuǎn)發(fā)到下一級，逐層查找該域名的對應(yīng)數(shù)據(jù)，知道獲得最終解析結(jié)果或失敗的相應(yīng)。

• 根域名服務(wù)器，根服務(wù)器主要用來管理互聯(lián)網(wǎng)的主目錄。是互聯(lián)網(wǎng)域名解析系統(tǒng)（DNS）中最高級別的域名服務(wù)器。

相關(guān)問題：

• 什么是DNS劫持？

DNS劫持（Domain Name System，域名劫持），是指在劫持的網(wǎng)絡(luò)范圍內(nèi)攔截域名解析的請求，分析請求的域名，把審查范圍以外的請求放行，返回假的IP地址或者什么都不做使請求失去響應(yīng)，其效果就是對特定的網(wǎng)絡(luò)不能訪問或訪問的是假網(wǎng)址。簡單來說，就是你輸入的是知乎的網(wǎng)址，但是卻跳轉(zhuǎn)到了百度的頁面。

• 為什么修改DNS為114.114.114.114或8.8.8.8可以解決電腦上不了網(wǎng)的問題？

當(dāng)你使用手機端可以正常打開網(wǎng)站，但是在電腦端訪問網(wǎng)站失敗的話，那么可能是DNS配置出現(xiàn)了問題，或者是在路由器緩存中解析查找錯誤，無法找到對應(yīng)的IP地址。那么這時我們可以在電腦端更改DNS進(jìn)行單獨配置即可正常訪問（MAC端，打開“網(wǎng)絡(luò)偏好設(shè)置”——“高級”——“DNS”進(jìn)行修改）。8.8.8.8是谷歌提供的免費DNS服務(wù)器的IP地址，114.114.114.114是電信的。

三、服務(wù)器處理請求

瀏覽器通過IP地址找到對應(yīng)的服務(wù)器，要求建立TCP鏈接，此時服務(wù)器開始處理用戶請求。

服務(wù)器是什么？

服務(wù)器是一臺安裝系統(tǒng)的機器。常見的系統(tǒng)有Linux、Windows Server2012等。系統(tǒng)里安裝的處理請求的應(yīng)用叫Web server

服務(wù)器如何處理請求？

由服務(wù)器上安裝的處理請求的應(yīng)用（Web Server）來處理。
常見的Web服務(wù)器有：Apache、Nginx、IIS、Lighttpd。
Web服務(wù)器接收用戶的Requset交給網(wǎng)站代碼或反向代理到其他服務(wù)器。

TCP是什么？

TCP是互聯(lián)網(wǎng)中的傳輸層協(xié)議，提供可靠的鏈接服務(wù)，采用三次握手確認(rèn)一個連接：

1. 瀏覽器向服務(wù)器發(fā)送建立連接的請求。
2. 服務(wù)器接收到瀏覽器發(fā)送的請求后，想瀏覽器發(fā)送統(tǒng)一連接的信號。
3. 瀏覽器接受到服務(wù)器發(fā)出的同意連接的信號后，再次向服務(wù)器發(fā)出確認(rèn)連接的信號。

當(dāng)三次握手返程，TCP客戶端和服務(wù)端成功的建立連接，就可以開始傳輸數(shù)據(jù)了。

四、網(wǎng)站處理流程

用戶輸入網(wǎng)址后向服務(wù)器發(fā)送內(nèi)容請求，服務(wù)器接收到請求后觸發(fā)Controller（控制器），控制器從Model（模型）和視圖（View）中獲取各種數(shù)據(jù)信息進(jìn)行處理，最后視圖（View）將數(shù)據(jù)渲染為HTML使得頁面完整的呈獻(xiàn)給用戶。

MVC是什么

MVC是一種設(shè)計模式，全名是Model View Controller，是模型（Model）- 視圖（View）- 控制器（Controller）的縮寫。

• Model（模型）
  是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。
  通常模型對象負(fù)責(zé)在數(shù)據(jù)苦衷存取數(shù)據(jù)。

• View（視圖）
  是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。
  通常視圖是一句模型數(shù)據(jù)創(chuàng)建的。
  而這一部分也是我們前端工作中很重要的一項內(nèi)容。

• Controller（控制器）
  是應(yīng)用程序中處理用戶交互的部分。
  通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。

五、瀏覽器顯示頁面信息

• HTML字符串被瀏覽器接收后被一句句讀取解析。
• 解析到link標(biāo)簽后重新發(fā)送請求獲取CSS。
• 解析到script標(biāo)簽后發(fā)送請求獲取JS，并執(zhí)行代碼。
• 解析到img標(biāo)簽后發(fā)送請求獲取圖片資源。
• 瀏覽器根據(jù)HTML和CSS計算得到渲染書，繪制到屏幕上。
• JS會被執(zhí)行，頁面展現(xiàn)。

以上就是我與大家分享的，從URL輸入到頁面展現(xiàn)其中過程的學(xué)習(xí)記錄，對于理解不到位或者錯誤的地方煩請大家指正，感謝。