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

Sanchi 發(fā)布于2019-08-21 11:50 / 874人閱讀

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

從URL輸入到頁(yè)面展現(xiàn) 1.輸入U(xiǎn)RL

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

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

舉例說(shuō)明：

常用協(xié)議：

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

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

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

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

chrome://net-internals/#dns

就可以查看本地DNS緩存：

3.查詢hosts文件

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

4.域名解析

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

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

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

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

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

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

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

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

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

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

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

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

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

在查找資料的過(guò)程中，看到一篇簡(jiǎn)單易懂還挺有趣的文章：

HTML頁(yè)面加載和解析流程

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

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

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

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

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

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

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

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

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

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

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