摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個(gè),到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)完善。
首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽
從用戶在瀏覽器中輸入一個(gè)URL,到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢?今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)完善。
為什么要獲取IP地址?
IP地址對(duì)應(yīng)一臺(tái)真實(shí)的物理機(jī)器,而且IP地址就像人的身份證是唯一的,用戶請(qǐng)求服務(wù)器,只需要輸入為該服務(wù)器分配的唯一的IP地址即可。但由于IP地址不便于記憶,因而使用較為語義化的域名來替代IP地址,而且一個(gè)域名可能對(duì)應(yīng)了對(duì)個(gè)IP地址,比如用戶輸入www.baidu.com,該域名下對(duì)應(yīng)了多個(gè)IP,域名解析服務(wù)器會(huì)根據(jù)一定的規(guī)則分配給用戶其中一個(gè)IP地址。
首先會(huì)在瀏覽器的緩存中查找,是否緩存了URL,如果有,就直接向該URL對(duì)應(yīng)的服務(wù)器發(fā)送請(qǐng)求;如果沒有則進(jìn)行下一步;
在本地的hosts文件中是否保存了該URL和其對(duì)應(yīng)的IP地址,如果保存了,就直接向該URL對(duì)應(yīng)的服務(wù)器發(fā)送請(qǐng)求;如果沒有則進(jìn)行下一步;
向本地DNS服務(wù)器(一般由本地網(wǎng)絡(luò)接入服務(wù)器提供商提供,比如移動(dòng))發(fā)送DNS請(qǐng)求,本地DNS服務(wù)器會(huì)首先查詢它的緩存記錄,如果有就將該域名對(duì)應(yīng)的IP地址返回給用戶,如果沒有則進(jìn)行下一步;
首先向根域名服務(wù)器發(fā)送DNS查詢請(qǐng)求,根域名服務(wù)器返回給可能保存了該域名的一級(jí)域名服務(wù)器地址;本地主機(jī)再根據(jù)返回的地址,向一級(jí)域名服務(wù)器發(fā)送DNS查詢請(qǐng)求;...一直迭代,直到找到對(duì)應(yīng)的域名存放的服務(wù)器,向其發(fā)送DNS查詢請(qǐng)求,該域名服務(wù)器返回該域名對(duì)應(yīng)的IP地址;
二、TCP/IP連接三次握手:
為什么要進(jìn)行三次握手?如果是兩次握手,如下面的對(duì)話只有前兩句,有可能出現(xiàn)的問題是:客戶端之前發(fā)送了一個(gè)連接請(qǐng)求報(bào)文,由于網(wǎng)絡(luò)原因滯留在網(wǎng)絡(luò)中,后來到達(dá)服務(wù)器端,服務(wù)器接收到該請(qǐng)求,就會(huì)建立連接,等待客戶端傳送數(shù)據(jù)。而此時(shí)客戶端壓根就不知道發(fā)生了什么,白白造成了服務(wù)器資源浪費(fèi)。
注:圖片來源于https://baijiahao.baidu.com/s...
客戶端:我要請(qǐng)求數(shù)據(jù)可以嗎?
服務(wù)器:可以的
客戶端:好的
三、瀏覽器向web服務(wù)器發(fā)送http請(qǐng)求客戶機(jī)與服務(wù)器建立連接后就可以通信了,這里就暫時(shí)先不詳細(xì)展開說http請(qǐng)求了。講下客戶端請(qǐng)求靜態(tài)資源和動(dòng)態(tài)資源。
靜態(tài)資源:如果客戶端請(qǐng)求的是靜態(tài)資源,則web服務(wù)器根據(jù)URL地址到服務(wù)器的對(duì)應(yīng)路徑下查找文件,然后給客戶端返回一個(gè)HTTP響應(yīng),包括狀態(tài)行、響應(yīng)頭和響應(yīng)正文。
動(dòng)態(tài)資源:如果客戶端請(qǐng)求的是動(dòng)態(tài)資源,則web服務(wù)器會(huì)調(diào)用CGI/VM執(zhí)行程序完成相應(yīng)的操作,如查詢數(shù)據(jù)庫,然后返回查詢結(jié)果數(shù)據(jù)集,并將運(yùn)行的結(jié)果--HTML文件返回給web服務(wù)器。Web服務(wù)器再將HTML文件返回給用戶。
四、瀏覽器渲染瀏覽器拿到HTML文件后,根據(jù)渲染規(guī)則進(jìn)行渲染:
解析HTML,構(gòu)建DOM樹
解析CSS,生成CSS規(guī)則樹
合并DOM樹和CSS規(guī)則樹,生成render樹
布局render樹
繪制render數(shù)、樹,即繪制頁面像素信息
GPU將各層合成,結(jié)果呈現(xiàn)在瀏覽器窗口中。
五、四次揮手客戶端沒有數(shù)據(jù)發(fā)送時(shí)就需要斷開連接,以釋放服務(wù)器資源。
注:圖片來源于https://baijiahao.baidu.com/s...
客戶端:我沒有數(shù)據(jù)要發(fā)送了,打算斷開連接
服務(wù)器:你的請(qǐng)求我收到了,我這還有數(shù)據(jù)沒有發(fā)送完成,你等下
服務(wù)器:我的數(shù)據(jù)發(fā)送完畢,可以斷開連接了
客戶端:ok,你斷開連接吧(客戶端獨(dú)白:我將在2倍的最大報(bào)文段生存時(shí)間后關(guān)閉連接。如果我再次收到服務(wù)器的消息,我就知道服務(wù)器沒有收到我的這句話,我就再發(fā)送一遍)。
最終服務(wù)器收到該客戶端發(fā)送的消息斷開連接,客戶端也關(guān)閉連接。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/61979.html
摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個(gè),到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)完善。 首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個(gè)URL,到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢?今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)...
摘要:首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個(gè),到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)完善。 首先說明以下是我參考網(wǎng)上答案和自己的思考,給出自己的想法,如果有問題,歡迎大家吐槽從用戶在瀏覽器中輸入一個(gè)URL,到整個(gè)頁面渲染,這個(gè)過程中究竟發(fā)生了什么呢?今天先簡單寫下整個(gè)過程,后面再一點(diǎn)點(diǎn)...
摘要:動(dòng)態(tài)映射利用來進(jìn)行域名解析,在專門的服務(wù)器上配置主機(jī)到地址的映射。前兩者都無效的情況下,向路由器發(fā)送查詢的請(qǐng)求,或者直接向用戶定義的服務(wù)地址發(fā)送域名解析的請(qǐng)求。 【前端芝士樹】從瀏覽器搜索框輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)發(fā)生了什么? 這個(gè)也是在前端面試中問得比較多的一個(gè)問題了,文章篇幅有限盡可能關(guān)注一些前端開發(fā)中不太會(huì)遇到的知識(shí)點(diǎn),如果想擴(kuò)展的話請(qǐng)點(diǎn)擊引用文章吧,也歡迎評(píng)論,后續(xù)會(huì)繼續(xù)補(bǔ)充。 0....
摘要:從輸入地址到顯示完整的頁面都做了哪些事情從輸入地址到獲取到數(shù)據(jù)的流程輸入地址如。從獲取到數(shù)據(jù)到顯示最終完整頁面的流程在輸入之后,依賴網(wǎng)絡(luò)模塊,資源加載器加載網(wǎng)頁只要是能夠解析的,都會(huì)把輸入的地址資源當(dāng)成解析。 從輸入U(xiǎn)RL地址到顯示完整的頁面Webkit都做了哪些事情 從輸入地址到獲取到數(shù)據(jù)的流程 1、輸入U(xiǎn)RL地址,如:http://www.yejm16361.com/demo......
摘要:文章同步到技術(shù)內(nèi)幕之頁面渲染過程最近拜讀了傳說中的技術(shù)內(nèi)幕一書,有很大收獲,尤其是對(duì)頁面渲染有了較深的認(rèn)識(shí)。解析語法分析,基于詞法解釋器生成的新標(biāo)記,構(gòu)建成抽象語法樹,解析器嘗試將其與某條語法規(guī)則進(jìn)行匹配。 文章同步到github《Webkit技術(shù)內(nèi)幕》之頁面渲染過程 最近拜讀了傳說中的《Webkit技術(shù)內(nèi)幕》一書,有很大收獲,尤其是對(duì)頁面渲染有了較深的認(rèn)識(shí)。由于功力有限,而且書中設(shè)...
閱讀 3814·2021-11-24 09:39
閱讀 1947·2021-11-16 11:45
閱讀 666·2021-11-16 11:45
閱讀 1130·2021-10-11 10:58
閱讀 2569·2021-09-09 11:51
閱讀 1995·2019-08-30 15:54
閱讀 756·2019-08-29 13:13
閱讀 3518·2019-08-26 12:18