從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么

該內(nèi)容參考地址

過程概述

  • 瀏覽器查找域名對應(yīng)的 IP 地址;
  • 瀏覽器根據(jù) IP 地址與服務(wù)器建立 socket 連接;
  • 瀏覽器與服務(wù)器通信: 瀏覽器請求,服務(wù)器處理請求;
  • 瀏覽器與服務(wù)器斷開連接。
1、瀏覽器查找域名對應(yīng)的 IP 地址
image.png

概念解釋

IP 地址:IP 協(xié)議為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配的一個邏輯地址。IP 地址如同門牌號碼,通過 IP 地址才能確定一臺主機位置。服務(wù)器本質(zhì)也是一臺主機,想要訪問某個服務(wù)器,必須先知道它的 IP 地址;
域名( DN ):IP 地址由四個數(shù)字組成,中間用點號連接,在使用過程中難記憶且易輸入錯誤,所以用我們熟悉的字母和數(shù)字組合來代替純數(shù)字的 IP 地址,比如我們只會記住 www.baidu.com(百度域名) 而不是 220.181.112.244(百度的其中一個 IP 地址);
DNS: 每個域名都對應(yīng)一個或多個提供相同服務(wù)服務(wù)器的 IP 地址,只有知道服務(wù)器 IP 地址才能建立連接,所以需要通過 DNS 把域名解析成一個 IP 地址。

查找過程
(概述:就像是js的查找機制一樣,先從內(nèi)部開始找,然后延展到外部原型鏈去查找)

  1. 瀏覽器搜索自己的 DNS 緩存(維護(hù)一張域名與 IP 地址的對應(yīng)表);

  2. 搜索操作系統(tǒng)中的 DNS 緩存(維護(hù)一張域名與 IP 地址的對應(yīng)表);

  3. 搜索操作系統(tǒng)的 hosts 文件( Windows 環(huán)境下,維護(hù)一張域名與 IP 地址的對應(yīng)表);

  4. 操作系統(tǒng)將域名發(fā)送至 LDNS(本地區(qū)域名服務(wù)器,如果你在學(xué)校接入互聯(lián)網(wǎng),則 LDNS 服務(wù)器就在學(xué)校,如果通過電信接入互聯(lián)網(wǎng),則 LDNS 服務(wù)器就在你當(dāng)?shù)氐碾娦拍抢铩#㎜DNS 查詢 自己的 DNS 緩存(一般查找成功率在 80% 左右),查找成功則返回結(jié)果,失敗則發(fā)起一個迭代 DNS 解析請求;

    1. LDNS 向 Root Name Server (根域名服務(wù)器,其雖然沒有每個域名的的具體信息,但存儲了負(fù)責(zé)每個域,如 com、net、org等的解析的頂級域名服務(wù)器的地址)發(fā)起請求,此處,Root Name Server 返回 com 域的頂級域名服務(wù)器的地址;

    2. LDNS 向 com 域的頂級域名服務(wù)器發(fā)起請求,返回 baidu.com 域名服務(wù)器地址;

    3. LDNS 向 baidu.com 域名服務(wù)器發(fā)起請求,得到 www.baidu.com 的 IP 地址;

  5. LDNS 將得到的 IP 地址返回給操作系統(tǒng),同時自己也將 IP 地址緩存起來;

  6. 操作系統(tǒng)將 IP 地址返回給瀏覽器,同時自己也將 IP 地址緩存起來;

Fin:至此,瀏覽器已經(jīng)得到了域名對應(yīng)的 IP 地址。

2、瀏覽器根據(jù) IP 地址與服務(wù)器建立 socket 連接;(三次握手)


第一次握手:client向server發(fā)送請求連接的報文
第二次握手:server接受連接后回復(fù)ack報文
第三次握手:clinet接收ack報文后向server發(fā)送ack報文,并分配資源,這tcp連接就建立了。

3、瀏覽器與服務(wù)器通信: 瀏覽器請求,服務(wù)器處理請求;
(概述:瀏覽器得到數(shù)據(jù)后對html進(jìn)行數(shù)據(jù)渲染)

實現(xiàn)過程:

  1. 瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請求,請求中包含請求文件的位置、請求文件的方式等等;
  2. 服務(wù)器接到請求后,會根據(jù) HTTP 請求中的內(nèi)容來決定如何獲取相應(yīng)的 HTML 文件;
  3. 服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器;
  4. 在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網(wǎng)頁;
  5. 在執(zhí)行 HTML 中代碼時,根據(jù)需要,瀏覽器會繼續(xù)請求圖片、CSS、JavsScript等文件,過程同請求 HTML ;
4、瀏覽器與服務(wù)器斷開連接(四次握手)

【中斷連接端可以是client,也可以是server。畢竟誰都可以叫停。上圖為分手需要完成的四次握手】
第一次握手:client向server發(fā)送中斷鏈接請求,發(fā)送FIN報文。表達(dá):我要跟你分手啦,你還有沒有什么話要說,如果還有,就不必急著同意,可以繼續(xù)說,或者發(fā)送數(shù)據(jù)。
第二次握手:發(fā)送ACK。表達(dá):我聽到你要跟我分手了,但我心有不忍,我要準(zhǔn)備一下。請你等等我。【這個時候,client進(jìn)入fin_wait狀態(tài),繼續(xù)等待server端的fin報文】
第三次握手:server考慮好了,覺得挽留無意。說完要說的話,為client做完要做的事,向cllient發(fā)送FIN報文,告訴client,我話都說完,可以為你做的事也做完,放你自由。我準(zhǔn)備關(guān)閉自己的連接了。
第四次握手:client收到fin報文后,知道server同意分開,但client不相信網(wǎng)絡(luò),怕server不知道要關(guān)閉,所以發(fā)送ack進(jìn)入time_wait狀態(tài),如果server沒有收到ack,會重傳。server收到ack后,就真的徹底斷開連接了。
cliient發(fā)送分手的狀態(tài):

server發(fā)送分手的狀態(tài):


最后

關(guān)于三次握手、四次握手可以到這里看一下(戳??)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容