從輸入U(xiǎn)RL到頁(yè)面展示

yearsj 發(fā)布于2019-08-02 16:06 / 648人閱讀

摘要：本地服務(wù)器收到信息后，再去聯(lián)系頂級(jí)域名服務(wù)器。頂級(jí)域名服務(wù)器收到請(qǐng)求后，如果自己無(wú)法解析，再返回下一級(jí)域名服務(wù)器的，進(jìn)行這樣一個(gè)迭代查詢之后，一直到子域名服務(wù)器。布局完成后，將渲染樹(shù)轉(zhuǎn)換成屏幕上的像素，顯示頁(yè)面。

當(dāng)我們輸入 URL 并按回車后，瀏覽器會(huì)對(duì) URL 進(jìn)行檢查，首先判斷URL格式，比如是ftp http ed2k等等，我們這里假設(shè)這個(gè)URL是http://hellocassie.cn，那么瀏覽器會(huì)對(duì)這個(gè) URL 進(jìn)行安全檢查，然后瀏覽器內(nèi)核會(huì)先查看緩存，再?zèng)Q定是發(fā)起請(qǐng)求，下載頁(yè)面，還是從緩存獲取頁(yè)面，如果是第一次訪問(wèn)，這時(shí)候還沒(méi)有緩存，所以會(huì)去向服務(wù)器發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求。

下載頁(yè)面

首先我們要確定服務(wù)器的網(wǎng)絡(luò)地址，才能把請(qǐng)求發(fā)給它，所以要把這個(gè)URL轉(zhuǎn)換成對(duì)應(yīng)的IP地址，瀏覽器會(huì)依次從瀏覽器緩存，系統(tǒng)緩存，路由器緩存，本地DNS服務(wù)器進(jìn)行一個(gè)遞歸查詢，如果本地DNS服務(wù)器也沒(méi)有對(duì)應(yīng)的IP地址的記錄，這時(shí)候它會(huì)把請(qǐng)求發(fā)至13臺(tái)根域名服務(wù)器，根域名服務(wù)器收到請(qǐng)求后會(huì)判斷這個(gè)域名是誰(shuí)來(lái)授權(quán)管理，然后返回一個(gè)負(fù)責(zé)該頂級(jí)域名服務(wù)器的一個(gè)IP。本地DNS服務(wù)器收到IP信息后，再去聯(lián)系頂級(jí)域名服務(wù)器。頂級(jí)域名服務(wù)器收到請(qǐng)求后，如果自己無(wú)法解析，再返回下一級(jí)域名服務(wù)器的IP，進(jìn)行這樣一個(gè)迭代查詢之后，一直到子域名服務(wù)器。

這個(gè)時(shí)候有兩種情況，第一種是子域名服務(wù)器返回了這個(gè)URL對(duì)應(yīng)的IP地址，第二種情況是經(jīng)過(guò)了CDN調(diào)度，如果目標(biāo)網(wǎng)站使用了CDN服務(wù)，則需要在CDN服務(wù)商的平臺(tái)設(shè)置相應(yīng)的CNAME記錄，這個(gè)記錄是CDN服務(wù)廠商的一個(gè)DNS服務(wù)器的域名，子域名服務(wù)器會(huì)返回這個(gè)CNAME記錄，本地DNS服務(wù)器得到這個(gè)記錄后，會(huì)向CDN服務(wù)廠商的DNS服務(wù)器查詢，然后CDN服務(wù)廠商的DNS服務(wù)器返回CDN服務(wù)廠商的一臺(tái)GSLB設(shè)備（全局負(fù)載均衡設(shè)備）的IP，本地DNS服務(wù)器攜帶自身的IP地址和要查詢的域名向GSLB設(shè)備發(fā)起請(qǐng)求，GSLB設(shè)備根據(jù)IP，以及要查詢的域名，選擇一臺(tái)用戶所屬區(qū)域的區(qū)域負(fù)載均衡設(shè)備，區(qū)域負(fù)載均衡設(shè)備根據(jù)一定的算法和策略，會(huì)向GSLB設(shè)備返回一個(gè)最適合的CDN節(jié)點(diǎn)的IP地址，比如說(shuō)返回一個(gè)距離用戶最近的CDN節(jié)點(diǎn)，因?yàn)镃DN服務(wù)器緩存了網(wǎng)站的源服務(wù)器的數(shù)據(jù)，而且會(huì)像源服務(wù)器一樣，響應(yīng)用戶的請(qǐng)求. 而且它離用戶更近，所以能獲得更快的響應(yīng)速度。最后本地DNS服務(wù)器拿到這個(gè)CDN節(jié)點(diǎn)的IP地址。

得到IP后，會(huì)建立TCP連接，如果是https開(kāi)頭的URL，還會(huì)建立SSL連接，進(jìn)行一個(gè)請(qǐng)求證書(shū)，生成對(duì)話密鑰的過(guò)程。
然后開(kāi)始進(jìn)行HTTP請(qǐng)求，瀏覽器會(huì)先生成一個(gè)HTTP數(shù)據(jù)包，包含這次請(qǐng)求的信息，主要是請(qǐng)求方法、請(qǐng)求的說(shuō)明和請(qǐng)求附帶的數(shù)據(jù)，這個(gè)HTTP數(shù)據(jù)包經(jīng)過(guò)傳輸層，頭部加入雙方的端口信息，被封裝成一個(gè)TCP數(shù)據(jù)包，然后經(jīng)過(guò)網(wǎng)絡(luò)層，頭部加入雙方的IP地址信息，被封裝成一個(gè)IP數(shù)據(jù)包，然后經(jīng)過(guò)數(shù)據(jù)鏈路層，頭部設(shè)置雙方的MAC地址，封裝成以太網(wǎng)數(shù)據(jù)包，最后變成二進(jìn)制數(shù)據(jù)，傳送到服務(wù)器。

然后服務(wù)器作出響應(yīng)，返回一個(gè)HTTP報(bào)文給瀏覽器，這個(gè)HTTP報(bào)文包含了狀態(tài)行，消息報(bào)頭，消息正文(就是HTML)。

緩存獲取頁(yè)面

然后我們?cè)倏吹诙N情況，如果本地有緩存，瀏覽器會(huì)先判斷緩存是否過(guò)期，通過(guò)Expires和Cache-Control字段來(lái)判斷是否命中強(qiáng)制緩存，Expires是服務(wù)器返回該請(qǐng)求結(jié)果緩存的到期時(shí)間，Cache-Control的max-age會(huì)返回一個(gè)相對(duì)時(shí)間，因?yàn)闊o(wú)法確定客戶端的時(shí)間是否與服務(wù)端的時(shí)間同步，所以同時(shí)存在時(shí)，Cache-Control的優(yōu)先級(jí)更高。
如果強(qiáng)制緩存失效，進(jìn)行協(xié)商緩存過(guò)程，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用本地緩存。

渲染頁(yè)面

在解析HTML的過(guò)程中，開(kāi)始構(gòu)建DOM樹(shù)，當(dāng)遇到外鏈資源比如CSS/JS，瀏覽器會(huì)并行下載 CSS 和 JavaScript，
CSS下載時(shí)異步，不會(huì)阻塞瀏覽器構(gòu)建DOM樹(shù)，但是會(huì)阻塞渲染，
JS會(huì)阻塞HTML的解析，需等待腳本下載完成并執(zhí)行后才會(huì)繼續(xù)解析HTML，
而且因?yàn)?JS 可能會(huì)查詢 CSSOM，所以必須在下載 CSS 文件之前將其阻止，然后才能執(zhí)行 JavaScript。
img圖片類資源會(huì)異步下載，不會(huì)阻塞解析，下載完畢后直接用圖片替換原有src的地方。

然后合并DOM樹(shù)和CSSOM樹(shù)，生成render樹(shù)，從 DOM 樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)，忽略腳本標(biāo)記、元標(biāo)記、display: none的節(jié)點(diǎn)，對(duì)于每個(gè)可見(jiàn)節(jié)點(diǎn)，為其找到適配的 CSSOM 規(guī)則并應(yīng)用它們。
然后開(kāi)始布局，從渲染樹(shù)的根節(jié)點(diǎn)開(kāi)始進(jìn)行遍歷，計(jì)算每個(gè)節(jié)點(diǎn)在網(wǎng)頁(yè)的確切位置和大小。
布局完成后，將渲染樹(shù)轉(zhuǎn)換成屏幕上的像素，顯示頁(yè)面。