成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從輸入一個URL到頁面渲染的流程簡介

niceforbear / 2435人閱讀

摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢今天先簡單寫下整個過程,后面再一點點完善。

首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽
從用戶在瀏覽器中輸入一個URL,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢?今天先簡單寫下整個過程,后面再一點點完善。

一、獲取IP地址

為什么要獲取IP地址?

IP地址對應(yīng)一臺真實的物理機器,而且IP地址就像人的身份證是唯一的,用戶請求服務(wù)器,只需要輸入為該服務(wù)器分配的唯一的IP地址即可。但由于IP地址不便于記憶,因而使用較為語義化的域名來替代IP地址,而且一個域名可能對應(yīng)了對個IP地址,比如用戶輸入www.baidu.com,該域名下對應(yīng)了多個IP,域名解析服務(wù)器會根據(jù)一定的規(guī)則分配給用戶其中一個IP地址。

首先會在瀏覽器的緩存中查找,是否緩存了URL,如果有,就直接向該URL對應(yīng)的服務(wù)器發(fā)送請求;如果沒有則進行下一步;

在本地的hosts文件中是否保存了該URL和其對應(yīng)的IP地址,如果保存了,就直接向該URL對應(yīng)的服務(wù)器發(fā)送請求;如果沒有則進行下一步;

向本地DNS服務(wù)器(一般由本地網(wǎng)絡(luò)接入服務(wù)器提供商提供,比如移動)發(fā)送DNS請求,本地DNS服務(wù)器會首先查詢它的緩存記錄,如果有就將該域名對應(yīng)的IP地址返回給用戶,如果沒有則進行下一步;

首先向根域名服務(wù)器發(fā)送DNS查詢請求,根域名服務(wù)器返回給可能保存了該域名的一級域名服務(wù)器地址;本地主機再根據(jù)返回的地址,向一級域名服務(wù)器發(fā)送DNS查詢請求;...一直迭代,直到找到對應(yīng)的域名存放的服務(wù)器,向其發(fā)送DNS查詢請求,該域名服務(wù)器返回該域名對應(yīng)的IP地址;

二、TCP/IP連接

三次握手:

為什么要進行三次握手?如果是兩次握手,如下面的對話只有前兩句,有可能出現(xiàn)的問題是:客戶端之前發(fā)送了一個連接請求報文,由于網(wǎng)絡(luò)原因滯留在網(wǎng)絡(luò)中,后來到達服務(wù)器端,服務(wù)器接收到該請求,就會建立連接,等待客戶端傳送數(shù)據(jù)。而此時客戶端壓根就不知道發(fā)生了什么,白白造成了服務(wù)器資源浪費。


注:圖片來源于https://baijiahao.baidu.com/s...

客戶端:我要請求數(shù)據(jù)可以嗎?

服務(wù)器:可以的

客戶端:好的

三、瀏覽器向web服務(wù)器發(fā)送http請求

客戶機與服務(wù)器建立連接后就可以通信了,這里就暫時先不詳細展開說http請求了。講下客戶端請求靜態(tài)資源和動態(tài)資源。

靜態(tài)資源:如果客戶端請求的是靜態(tài)資源,則web服務(wù)器根據(jù)URL地址到服務(wù)器的對應(yīng)路徑下查找文件,然后給客戶端返回一個HTTP響應(yīng),包括狀態(tài)行、響應(yīng)頭和響應(yīng)正文。

動態(tài)資源:如果客戶端請求的是動態(tài)資源,則web服務(wù)器會調(diào)用CGI/VM執(zhí)行程序完成相應(yīng)的操作,如查詢數(shù)據(jù)庫,然后返回查詢結(jié)果數(shù)據(jù)集,并將運行的結(jié)果--HTML文件返回給web服務(wù)器。Web服務(wù)器再將HTML文件返回給用戶。

四、瀏覽器渲染

瀏覽器拿到HTML文件后,根據(jù)渲染規(guī)則進行渲染:

解析HTML,構(gòu)建DOM樹

解析CSS,生成CSS規(guī)則樹

合并DOM樹和CSS規(guī)則樹,生成render樹

布局render樹

繪制render數(shù)、樹,即繪制頁面像素信息

GPU將各層合成,結(jié)果呈現(xiàn)在瀏覽器窗口中。

五、四次揮手

客戶端沒有數(shù)據(jù)發(fā)送時就需要斷開連接,以釋放服務(wù)器資源。


注:圖片來源于https://baijiahao.baidu.com/s...

客戶端:我沒有數(shù)據(jù)要發(fā)送了,打算斷開連接

服務(wù)器:你的請求我收到了,我這還有數(shù)據(jù)沒有發(fā)送完成,你等下

服務(wù)器:我的數(shù)據(jù)發(fā)送完畢,可以斷開連接了

客戶端:ok,你斷開連接吧(客戶端獨白:我將在2倍的最大報文段生存時間后關(guān)閉連接。如果我再次收到服務(wù)器的消息,我就知道服務(wù)器沒有收到我的這句話,我就再發(fā)送一遍)。

最終服務(wù)器收到該客戶端發(fā)送的消息斷開連接,客戶端也關(guān)閉連接。

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/61979.html

相關(guān)文章

  • 輸入一個URL頁面渲染流程簡介

    摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢今天先簡單寫下整個過程,后面再一點點完善。 首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個URL,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢?今天先簡單寫下整個過程,后面再一點點...

    you_De 評論0 收藏0
  • 輸入一個URL頁面渲染流程簡介

    摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢今天先簡單寫下整個過程,后面再一點點完善。 首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個URL,到整個頁面渲染,這個過程中究竟發(fā)生了什么呢?今天先簡單寫下整個過程,后面再一點點...

    elliott_hu 評論0 收藏0
  • 【前端芝士樹】瀏覽器搜索框輸入網(wǎng)址網(wǎng)頁呈現(xiàn)發(fā)生了什么?

    摘要:動態(tài)映射利用來進行域名解析,在專門的服務(wù)器上配置主機到地址的映射。前兩者都無效的情況下,向路由器發(fā)送查詢的請求,或者直接向用戶定義的服務(wù)地址發(fā)送域名解析的請求。 【前端芝士樹】從瀏覽器搜索框輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)發(fā)生了什么? 這個也是在前端面試中問得比較多的一個問題了,文章篇幅有限盡可能關(guān)注一些前端開發(fā)中不太會遇到的知識點,如果想擴展的話請點擊引用文章吧,也歡迎評論,后續(xù)會繼續(xù)補充。 0....

    longmon 評論0 收藏0
  • 輸入URL地址顯示完整頁面Webkit都做了哪些事情

    摘要:從輸入地址到顯示完整的頁面都做了哪些事情從輸入地址到獲取到數(shù)據(jù)的流程輸入地址如。從獲取到數(shù)據(jù)到顯示最終完整頁面的流程在輸入之后,依賴網(wǎng)絡(luò)模塊,資源加載器加載網(wǎng)頁只要是能夠解析的,都會把輸入的地址資源當成解析。 從輸入URL地址到顯示完整的頁面Webkit都做了哪些事情 從輸入地址到獲取到數(shù)據(jù)的流程 1、輸入URL地址,如:http://www.yejm16361.com/demo......

    468122151 評論0 收藏0
  • 《Webkit技術(shù)內(nèi)幕》之頁面渲染過程

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

    vvpvvp 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<