一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成,這個(gè)過(guò)程中都發(fā)生了什么?

著名前端面試題:
一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成,這個(gè)過(guò)程中都發(fā)生了什么?

  1. DNS解析
    DNS解析的過(guò)程就是尋找哪臺(tái)機(jī)器上有你需要資源的過(guò)程。當(dāng)你在瀏覽器地址欄輸入一個(gè)地址比如:www.baidu.com,其實(shí)并不是百度真正的地址,這只是方便人們記憶和理解所設(shè)計(jì)的,真正的地址是IP地址,而www.baidu.com是域名(ip地址和域名并不是一一對(duì)應(yīng)的),DNS解析就是將你輸入的域名解析成ip地址。
    查找(解析)過(guò)程:搜索瀏覽器自己的DNS緩存 --> 搜索操作系統(tǒng)中的DNS緩存 --> 搜索操作系統(tǒng)的hosts文件 --> 發(fā)送域名到本地域名服務(wù)器查詢 --> 向根域名服務(wù)器查詢 --> 向頂級(jí)域名服務(wù)器查詢,
    得到ip地址,返回給瀏覽器,同時(shí)瀏覽器將ip地址緩存
  2. TCP連接
    得到服務(wù)器的ip地址后,接下來(lái)開(kāi)始連接,總的來(lái)說(shuō)需要經(jīng)歷以下三個(gè)過(guò)程(簡(jiǎn)稱三次握手):
    1. 主機(jī)想服務(wù)器發(fā)送一個(gè)建立連接的請(qǐng)求(您好,我想認(rèn)識(shí)您);
    2. 服務(wù)器接到請(qǐng)求后發(fā)送同意連接的信號(hào)(好的,很高興認(rèn)識(shí)您);
    3. 主機(jī)接到同意連接的信號(hào)后,再次向服務(wù)器發(fā)送了確認(rèn)信號(hào)(我也很高興認(rèn)識(shí)您),自此,主機(jī)與服務(wù)器建立了連接
  3. 發(fā)送HTTP請(qǐng)求
    瀏覽器根據(jù)URL內(nèi)容生成HTTP請(qǐng)求,HTTP報(bào)文被包裹在TCP報(bào)文中發(fā)送 ,服務(wù)器收到TCP報(bào)文是會(huì)解包提取出HTTP報(bào)文,它主要由三部分組成
    1. 請(qǐng)求行:請(qǐng)求方法 資源路徑 HTTP協(xié)議版本
    2. 請(qǐng)求報(bào)頭:請(qǐng)求報(bào)頭允許客戶端向服務(wù)器傳遞請(qǐng)求的附加信息和客戶端自身的信息。
    3. 請(qǐng)求正文
  4. 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
    HTTP響應(yīng)報(bào)文也是由三部分組成: 狀態(tài)碼, 響應(yīng)報(bào)頭和響應(yīng)報(bào)文。
  5. 瀏覽器解析渲染頁(yè)面
    瀏覽器是一個(gè)邊解析邊渲染的過(guò)程。首先瀏覽器解析HTML文件構(gòu)建DOM樹(shù),然后解析CSS文件構(gòu)建渲染樹(shù),等到渲染樹(shù)構(gòu)建完成后,瀏覽器開(kāi)始布局渲染樹(shù)并將其繪制到屏幕上。
  6. 連接結(jié)束
  7. 主機(jī)向服務(wù)器發(fā)送一個(gè)斷開(kāi)連接的請(qǐng)求(不早了,我該走了);
  8. 服務(wù)器接到請(qǐng)求后發(fā)送確認(rèn)收到請(qǐng)求的信號(hào)(知道了);
  9. 服務(wù)器向主機(jī)發(fā)送斷開(kāi)通知(我也該走了);
  10. 主機(jī)接到斷開(kāi)通知后斷開(kāi)連接并反饋一個(gè)確認(rèn)信號(hào)(嗯,好的),服務(wù)器收到確認(rèn)信號(hào)后斷開(kāi)連接;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容