一個網(wǎng)頁的形成過程

WelliJhon 發(fā)布于2019-08-02 14:25 / 1052人閱讀

摘要：一個網(wǎng)頁從我們輸入網(wǎng)址到打開經(jīng)歷了以下步驟。如果沒有或記錄已經(jīng)過期，則向域名解析服務器發(fā)送解析請求。服務器收到請求，產(chǎn)生響應，并將網(wǎng)頁發(fā)送給負載均衡服務器。負載均衡服務器將網(wǎng)頁傳遞給鏈處理，之后發(fā)回給我們的瀏覽器。

一個網(wǎng)頁從我們輸入網(wǎng)址到打開經(jīng)歷了以下步驟。

DNS解析

DNS（域名系統(tǒng) Domain Name System）由解析器和域名服務器組成,域名服務器保存著該網(wǎng)絡中所有主機的域名和對應的IP地址,域名有唯一對應的IP地址,但是IP地址不一定對應一個域名，我們就是根據(jù)DNS來上網(wǎng)的。

當用戶輸入一個網(wǎng)址并按下回車鍵時，瀏覽器得到一個域名。而實際通訊過程中我們需要一個IP地址。因此我們需要先把域名轉化成對應的IP地址，這個過程就叫做DNS解析。

過程

簡述

瀏覽器搜索緩存-->hosts文件和操作系統(tǒng)緩存-->域名解析服務器-->遞歸迭代
YSE-->返回給瀏覽器
NO-->向下找

詳細描述

瀏覽器首先搜索自身緩存的DNS記錄。

如果沒有或記錄已經(jīng)過期，則搜索hosts文件和操作系統(tǒng)緩存。

如果沒有或記錄已經(jīng)過期，則向域名解析服務器發(fā)送解析請求。

如果還是沒有，則開始遞歸 + 迭代解析。

獲取域名和對應IP后，一步步向上返回，直到返回給瀏覽器。

發(fā)起TCP請求（三次握手）

簡述

客戶端（發(fā)送連接請求）-->服務器端
服務器端（建立連接并發(fā)送確認報文）-->客戶端
客戶端（發(fā)送確認收到確認報文）-->服務器端

詳細描述

客戶端向服務器端發(fā)送連接請求的報文。

服務器端收到請求后，同意建立連接，并向客戶端發(fā)送確認報文。

客戶端收到后，再次向服務器端發(fā)送報文，確認已經(jīng)收到確認報文。

建立起TCP連接后，開始進行通信。

建立TCP連接后，瀏覽器向服務器發(fā)送HTTP請求

如：瀏覽器發(fā)出取文件指令GET。

負載均衡

當一臺服務器無法支持大量用戶訪問時，將用戶分攤到兩個或多個服務器上的方法叫負載均衡。

過程

簡述

瀏覽器（發(fā)送請求）-->Nginx（建立TCP連接，轉發(fā)請求）-->web服務器（發(fā)送網(wǎng)頁）-->Nginx（傳遞網(wǎng)頁）-->filter鏈（處理）-->瀏覽器

詳細描述

一般，如果我們的平臺配備了負載均衡的話，前一步DNS解析獲得的IP地址應該是我們Nginx負載均衡服務器的IP地址。所以，我們的瀏覽器將我們的請求發(fā)送到了Nginx負載均衡服務器上。

Nginx根據(jù)我們設定的分配算法和規(guī)則，選擇一臺后端的真實Web服務器，與之建立TCP連接、并轉發(fā)我們?yōu)g覽器發(fā)出去的網(wǎng)頁請求。

Web服務器收到請求，產(chǎn)生響應，并將網(wǎng)頁發(fā)送給Nginx負載均衡服務器。

Nginx負載均衡服務器將網(wǎng)頁傳遞給filter鏈處理，之后發(fā)回給我們的瀏覽器。

服務器響應HTTP請求，將請求的資源發(fā)送給瀏覽器。 瀏覽器釋放TCP連接（四次揮手）

瀏覽器（發(fā)送釋放連接報文）-->服務器
服務器（發(fā)送確認報文并發(fā)送完數(shù)據(jù)）-->瀏覽器
服務器（發(fā)送釋放連接請求）-->瀏覽器
瀏覽器（發(fā)出確認）-->服務器
等待一段時間后，瀏覽器釋放TCP連接

瀏覽器向服務器發(fā)送釋放連接報文。

服務器收到后，發(fā)出確認報文，然后將服務器上未傳送完的數(shù)據(jù)發(fā)送完。

服務器數(shù)據(jù)傳輸完成后，向瀏覽器發(fā)送釋放連接請求。

瀏覽器收到后，發(fā)出確認，然后等待一段時間，釋放TCP連接。

瀏覽器渲染

瀏覽器接收到服務器服務器返回的HTML頁面代碼，在解析和渲染這個頁面時，里面的JS、CSS、圖片等靜態(tài)資源，也是一個個HTTP請求，都需要經(jīng)過上面的步驟。

瀏覽器根據(jù)頁面內(nèi)容，生成DOM Tree。

根據(jù)css內(nèi)容，生成CSS Rule Tree（規(guī)則樹）。

調用JS執(zhí)行引擎執(zhí)行JS代碼。

根據(jù)DOM Tree和 CSS Rule Tree生成 Render Tree（呈現(xiàn)樹）。

根據(jù)根據(jù)Render Tree渲染網(wǎng)頁。

文章參考自https://www.jianshu.com/p/0c8c7cecf946和https://www.jianshu.com/p/cc1d185a7842

GPU云服務器云服務器死鎖的形成 webrtc的波束形成寫一個存儲過程 webrtc中的語音波束形成

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53799.html

最全知識圖譜綜述#1: 概念以及構建技術

摘要：本質上知識圖譜旨在描述真實世界中存在的各種實體或概念及其關系其構成一張巨大的語義網(wǎng)絡圖，節(jié)點表示實體或概念，邊則由屬性或關系構成。圖知識圖譜示例知識圖譜的架構知識圖譜的架構包括自身的邏輯結構以及構建知識圖譜所采用的技術體系架構。引言隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)絡數(shù)據(jù)內(nèi)容呈現(xiàn)爆炸式增長的態(tài)勢。由于互聯(lián)網(wǎng)內(nèi)容的大規(guī)模、異質多元、組織結構松散的特點，給人們有效獲取信息和知識提出了挑戰(zhàn)。知識圖譜（Know...

wujl596 2019-04-25 18:19 評論0 收藏0
前端黑科技：美團網(wǎng)頁首幀優(yōu)化實踐

摘要：在美團支付的前端技術體系里，通過預渲染提升網(wǎng)頁首幀優(yōu)化，從而優(yōu)化了白屏問題，提升用戶體驗，并形成了最佳實踐。我們團隊主要負責美團支付相關的業(yè)務，如果網(wǎng)站太慢會影響用戶的支付體驗，會造成客訴或資損。前言自JavaScript誕生以來，前端技術發(fā)展非常迅速。移動端白屏優(yōu)化是前端界面體驗的一個重要優(yōu)化方向，Web 前端誕生了 SSR 、CSR、預渲染等技術。在美團支付的前端技術體系里，通...

mrli2016 2019-08-26 12:24 評論0 收藏0
《Webkit技術內(nèi)幕》之頁面渲染過程

摘要：文章同步到技術內(nèi)幕之頁面渲染過程最近拜讀了傳說中的技術內(nèi)幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規(guī)則進行匹配。文章同步到github《Webkit技術內(nèi)幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內(nèi)幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

vvpvvp 2019-08-29 16:17 評論0 收藏0
《Webkit技術內(nèi)幕》之頁面渲染過程

摘要：文章同步到技術內(nèi)幕之頁面渲染過程最近拜讀了傳說中的技術內(nèi)幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規(guī)則進行匹配。文章同步到github《Webkit技術內(nèi)幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內(nèi)幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

adam1q84 2019-08-23 10:43 評論0 收藏0