從輸入URL到頁面展示

gplane 發(fā)布于2019-08-23 12:03 / 2832人閱讀

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

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

下載頁面

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

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

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

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

緩存獲取頁面

然后我們再看第二種情況，如果本地有緩存，瀏覽器會先判斷緩存是否過期，通過Expires和Cache-Control字段來判斷是否命中強制緩存，Expires是服務(wù)器返回該請求結(jié)果緩存的到期時間，Cache-Control的max-age會返回一個相對時間，因為無法確定客戶端的時間是否與服務(wù)端的時間同步，所以同時存在時，Cache-Control的優(yōu)先級更高。
如果強制緩存失效，進(jìn)行協(xié)商緩存過程，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用本地緩存。

渲染頁面

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

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

GPU云服務(wù)器云服務(wù)器輸入url 實時數(shù)據(jù)展示頁面 jsp頁面展示商品 js 頁面展示數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97887.html

發(fā)表評論

登陸后可評論

0條評論

gplane

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW PUSH 服務(wù)

閱讀 893·2021-11-22 15:25
太平洋城市銀行遭AVOS Locker勒索軟件攻擊

閱讀 1530·2021-09-08 09:45
阿帕云引擎怎么樣?阿帕云引擎大陸版/國際版/分銷版價格(終生免費升級/續(xù)簽)

閱讀 1846·2021-09-02 09:46
CSS3開發(fā)文檔

閱讀 1430·2019-08-30 15:56
深入理解css盒子模型

閱讀 1596·2019-08-29 15:14
你不需要基于 CSS Grid 的柵格布局系統(tǒng)

閱讀 1227·2019-08-29 13:06
軟件測試江湖之公會武器之爭

閱讀 2074·2019-08-29 12:34
這兩天老是有兄弟問到Vue的登陸和注冊，登陸成功留在首頁，沒有登錄回到登錄頁面，現(xiàn)在我用最簡單實用的

閱讀 1469·2019-08-26 12:14

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

從輸入URL到頁面展示

相關(guān)文章