20170809-從URL輸入到頁面展現(xiàn)

alighters 發(fā)布于2019-08-29 13:09 / 3126人閱讀

摘要：本地域名服務(wù)器在查找域名后，把對應(yīng)的地址放在回答報文中返回。若本地域名服務(wù)器查找不到對應(yīng)的，則此域名服務(wù)器就暫時成為中的另一個客戶，并向其他域名服務(wù)器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務(wù)器為止。

從URL輸入到頁面展現(xiàn) 1.輸入URL

URL:統(tǒng)一資源定位符，是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示。

URL包含以下幾部分：協(xié)議、服務(wù)器名稱(或IP地址)、路徑、參數(shù)和查詢。

舉例說明：

常用協(xié)議：

協(xié)議	中文名稱	默認(rèn)端口號
http	超文本傳輸協(xié)議	80
https	用安全套接字層傳送的超文本傳輸協(xié)議	443
ftp	文件傳輸協(xié)議	21
TELNET	遠(yuǎn)程終端協(xié)議	23

如果地址不包含端口號，根據(jù)協(xié)議的默認(rèn)端口號確定一個。

2.根據(jù)URL，在本地DNS緩存中查找域名對應(yīng)的IP地址

瀏覽器和操作系統(tǒng)在獲取網(wǎng)站域名的實(shí)際IP地址后會對其IP進(jìn)行緩存，在短時間內(nèi)重復(fù)訪問同一域名時，會直接在DNS緩存中讀取域名對應(yīng)的IP地址，以減少網(wǎng)絡(luò)請求的損耗（先在瀏覽器DNS緩存中查找，如果沒有找到，則會在操作系統(tǒng)DNS緩存中查找）。瀏覽器和操作系統(tǒng)都有一個固定的DNS緩存時間，其中Chrome的過期時間是1分鐘，在這個期限內(nèi)不會重新請求DNS。Chrome瀏覽器看本身的DNS緩存時間比較方便，在地址欄輸入:

chrome://net-internals/#dns

就可以查看本地DNS緩存：

3.查詢hosts文件

如果在本地DNS緩存中沒有找到域名對應(yīng)的IP地址，則會查詢hosts文件，看其中是否已經(jīng)有與當(dāng)前域名對應(yīng)的 IP 地址，如果有就會直接采用，如果沒有，那么就得由DNS服務(wù)器進(jìn)行域名解析完成域名與IP的轉(zhuǎn)換工作。

4.域名解析

域名系統(tǒng)DNS(Domain Name System)：用來把人們使用的域名轉(zhuǎn)換為IP地址的系統(tǒng)。它是一個聯(lián)機(jī)分布式數(shù)據(jù)庫系統(tǒng)，采用客戶服務(wù)器方式。

域名到IP地址的解析：當(dāng)瀏覽器需要把域名解析為IP地址時，會調(diào)用解析程序，并成為DNS的一個客戶，把帶解析的域名放在DNS請求報文中，以UDP用戶數(shù)據(jù)報方式發(fā)送給本地域名服務(wù)器可以是路由器或者是運(yùn)營商服務(wù)器）。本地域名服務(wù)器在查找域名后，把對應(yīng)的IP地址放在回答報文中返回。瀏覽器在獲取相應(yīng)的IP地址后即可進(jìn)行下一步的通信。

若本地域名服務(wù)器查找不到對應(yīng)的IP，則此域名服務(wù)器就暫時成為DNS中的另一個客戶，并向其他域名服務(wù)器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務(wù)器為止。

5.瀏覽器與服務(wù)器建立連接，并發(fā)送請求給服務(wù)器

當(dāng)瀏覽器得到域名對應(yīng)的IP地址后，則會使用TCP協(xié)議，和服務(wù)器建立連接（三次握手）。

和服務(wù)器建立連接后，瀏覽器則會使用相關(guān)協(xié)議(http或https)，向服務(wù)器發(fā)送請求。

HTTP協(xié)議請求方法主要有：get、post、put、delete等幾種方式。

6.服務(wù)器收到請求并處理，最后返回結(jié)果

服務(wù)器是一臺安裝系統(tǒng)的機(jī)器，常見的系統(tǒng)如Linux、windows server 2012，系統(tǒng)中安裝的處理請求的應(yīng)用叫Web server。常見的Web服務(wù)器有 Apache、Nginx、IIS、Lighttpd，Web服務(wù)器接收用戶的請求，或者接受請求反向代理到其他Web服務(wù)器。

(以MVC框架為例)當(dāng)服務(wù)器收到來自用戶的請求后，首先Controller(控制器)根據(jù)用戶的請求調(diào)用相應(yīng)的Model(模型)去處理用戶請求相關(guān)的業(yè)務(wù)邏輯(包括對數(shù)據(jù)庫的增刪改查)，然后將處理結(jié)果傳遞給對應(yīng)的View(視圖)，構(gòu)造顯示頁面(HTML文件)。最后服務(wù)器使用HTTP響應(yīng)返回相應(yīng)的資源(HTML文件)。

7.瀏覽器處理響應(yīng)

瀏覽器收到來自服務(wù)器的響應(yīng)后，會將響應(yīng)中的HTML字符串一句句讀取解析，解析到link標(biāo)簽后重新發(fā)送請求下載css文件，解析到script標(biāo)簽后重新發(fā)送請求下載js文件，并執(zhí)行代碼，解析到img標(biāo)簽后重新發(fā)送請求獲取圖片資源。

瀏覽器根據(jù)html、css計(jì)算得到渲染樹，結(jié)合相關(guān)js的執(zhí)行結(jié)果，最終將網(wǎng)頁繪制到屏幕上，。

在查找資料的過程中，看到一篇簡單易懂還挺有趣的文章：

HTML頁面加載和解析流程

用戶輸入網(wǎng)址（假設(shè)是個html頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請求，服務(wù)器返回html文件；

瀏覽器開始載入html代碼，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個＜link＞標(biāo)簽引用外部CSS文件；

瀏覽器又發(fā)出CSS文件的請求，服務(wù)器返回這個CSS文件；

瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了；

瀏覽器在代碼中發(fā)現(xiàn)一個＜img＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼；

服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；

瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的＜script＞標(biāo)簽，趕快運(yùn)行它；

Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=”none”）。突然少了這么一個元素，瀏覽器不得不重新渲染這部分代碼；

終于等到了＜/html＞的到來，瀏覽器淚流滿面……

等等，還沒完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑；

瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務(wù)器請求了新的CSS文件，重新渲染頁面。