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