概述一個(gè)頁面從輸入U(xiǎn)RL到頁面加載完的過程
過程概述
- 瀏覽器查找域名對(duì)應(yīng)的 IP 地址;
- 瀏覽器根據(jù) IP 地址與服務(wù)器建立 socket 連接;
- 瀏覽器與服務(wù)器通信: 瀏覽器請(qǐng)求,服務(wù)器處理請(qǐng)求;
- 瀏覽器與服務(wù)器斷開連接。
以下為詳細(xì)解析:
根據(jù)域名查找 IP 地址
概念解釋
- IP 地址:IP 協(xié)議為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配的一個(gè)邏輯地址。IP 地址如同門牌號(hào)碼,通過 IP 地址才能確定一臺(tái)主機(jī)位置。服務(wù)器本質(zhì)也是一臺(tái)主機(jī),想要訪問某個(gè)服務(wù)器,必須先知道它的 IP 地址;
- 域名( DN ):IP 地址由四個(gè)數(shù)字組成,中間用點(diǎn)號(hào)連接,在使用過程中難記憶且易輸入錯(cuò)誤,所以用我們熟悉的字母和數(shù)字組合來代替純數(shù)字的 IP 地址,比如我們只會(huì)記住 www.baidu.com(百度域名) 而不是 220.181.112.244(百度的其中一個(gè) IP 地址);
- DNS: 每個(gè)域名都對(duì)應(yīng)一個(gè)或多個(gè)提供相同服務(wù)服務(wù)器的 IP 地址,只有知道服務(wù)器 IP 地址才能建立連接,所以需要通過 DNS 把域名解析成一個(gè) IP 地址。
知道了上面的概念,大概就知道了想要獲得服務(wù)器的門牌號(hào)碼,需要先將域名轉(zhuǎn)換成 IP 地址。轉(zhuǎn)換過程如下(以查詢 www.baidu.com 的 IP 地址為例,其中2、3、4步均在上一步未查詢成功的情況下進(jìn)行):
查找過程
1.瀏覽器搜索自己的 DNS 緩存(維護(hù)一張域名與 IP 地址的對(duì)應(yīng)表);
2.搜索操作系統(tǒng)中的 DNS 緩存(維護(hù)一張域名與 IP 地址的對(duì)應(yīng)表);
3.搜索操作系統(tǒng)的 hosts 文件( Windows 環(huán)境下,維護(hù)一張域名與 IP 地址的對(duì)應(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ù)氐碾娦拍抢?。)LDNS 查詢自己的 DNS 緩存(一般查找成功率在 80% 左右),查找成功則返回結(jié)果,失敗則發(fā)起一個(gè)迭代 DNS 解析請(qǐng)求;
- LDNS 向 Root Name Server (根域名服務(wù)器,其雖然沒有每個(gè)域名的的具體信息,但存儲(chǔ)了負(fù)責(zé)每個(gè)域,如 com、net、org等的解析的頂級(jí)域名服務(wù)器的地址)發(fā)起請(qǐng)求,此處,Root Name Server 返回 com 域的頂級(jí)域名服務(wù)器的地址;
- LDNS 向 com 域的頂級(jí)域名服務(wù)器發(fā)起請(qǐng)求,返回 baidu.com 域名服務(wù)器地址;
- LDNS 向 baidu.com 域名服務(wù)器發(fā)起請(qǐng)求,得到 www.baidu.com 的 IP 地址;
5.LDNS 將得到的 IP 地址返回給操作系統(tǒng),同時(shí)自己也將 IP 地址緩存起來;
6.操作系統(tǒng)將 IP 地址返回給瀏覽器,同時(shí)自己也將 IP 地址緩存起來;
7.至此,瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的 IP 地址。
補(bǔ)充說明
- 域名與 URL 是兩個(gè)概念:域名是一臺(tái)或一組服務(wù)器的名稱,用來確定服務(wù)器在 Internet 上的位置;URL 是統(tǒng)一資源定位符,用來確定某一個(gè)文件的具體位置,例如,zhihu.com 是 知乎的域名,根據(jù)這個(gè)域名可以找到知乎的服務(wù)器,zhihu.com/people/CompileYouth 是 URL ,可以根據(jù)這個(gè) URL 定位我的知乎主頁;
- IP 地址與域名不是一一對(duì)應(yīng)的關(guān)系:可以把多個(gè)提供相同服務(wù)的服務(wù)器 IP 設(shè)置為同一個(gè)域名,但在同一時(shí)刻一個(gè)域名只能解析出一個(gè) IP地址;同時(shí),一個(gè) IP 地址可以綁定多個(gè)域名,數(shù)量不限;
建立連接--三次握手
知道了服務(wù)器的 IP 地址,下面便開始與服務(wù)器建立連接了。
通俗地講,通信連接的建立需要經(jīng)歷以下三個(gè)過程:
- 主機(jī)向服務(wù)器發(fā)送一個(gè)建立連接的請(qǐng)求(您好,我想認(rèn)識(shí)您);
- 服務(wù)器接到請(qǐng)求后發(fā)送同意連接的信號(hào)(好的,很高興認(rèn)識(shí)您);
- 主機(jī)接到同意連接的信號(hào)后,再次向服務(wù)器發(fā)送了確認(rèn)信號(hào)(我也很高興認(rèn)識(shí)您),自此,主機(jī)與服務(wù)器兩者建立了連接。
補(bǔ)充說明
- TCP 協(xié)議:三次握手的過程采用 TCP 協(xié)議,其可以保證信息傳輸?shù)目煽啃?,三次握手過程中,若一方收不到確認(rèn)信號(hào),協(xié)議會(huì)要求重新發(fā)送信號(hào)。
網(wǎng)頁請(qǐng)求與顯示
當(dāng)服務(wù)器與主機(jī)建立了連接之后,下面主機(jī)便與服務(wù)器進(jìn)行通信。網(wǎng)頁請(qǐng)求是一個(gè)單向請(qǐng)求的過程,即是一個(gè)主機(jī)向服務(wù)器請(qǐng)求數(shù)據(jù),服務(wù)器返回相應(yīng)的數(shù)據(jù)的過程。
1.瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請(qǐng)求,請(qǐng)求中包含請(qǐng)求文件的位置、請(qǐng)求文件的方式等等;
2.服務(wù)器接到請(qǐng)求后,會(huì)根據(jù) HTTP 請(qǐng)求中的內(nèi)容來決定如何獲取相應(yīng)的 HTML 文件;
3.服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器;
4.在瀏覽器還沒有完全接收 HTML 文件時(shí)便開始渲染、顯示網(wǎng)頁;
5.在執(zhí)行 HTML 中代碼時(shí),根據(jù)需要,瀏覽器會(huì)繼續(xù)請(qǐng)求圖片、CSS、JavsScript等文件,過程同請(qǐng)求 HTML ;
斷開連接--四次揮手
1.主機(jī)向服務(wù)器發(fā)送一個(gè)斷開連接的請(qǐng)求(不早了,我該走了);
2.服務(wù)器接到請(qǐng)求后發(fā)送確認(rèn)收到請(qǐng)求的信號(hào)(知道了);
3.服務(wù)器向主機(jī)發(fā)送斷開通知(我也該走了);
4.主機(jī)接到斷開通知后斷開連接并反饋一個(gè)確認(rèn)信號(hào)(嗯,好的),服務(wù)器收到確認(rèn)信號(hào)后斷開連接;
補(bǔ)充說明
- 為什么服務(wù)器在接到斷開請(qǐng)求時(shí)不立即同意斷開:當(dāng)服務(wù)器收到斷開連接的請(qǐng)求時(shí),可能仍然有數(shù)據(jù)未發(fā)送完畢,所有服務(wù)器先發(fā)送確認(rèn)信號(hào),等所有數(shù)據(jù)發(fā)送完畢后再同意斷開。
- 第四次握手后,主機(jī)發(fā)送確認(rèn)信號(hào)后并沒有立即斷開連接,而是等待了 2 個(gè)報(bào)文傳送周期,原因是:如果第四次握手的確認(rèn)信息丟失,服務(wù)器將會(huì)重新發(fā)送第三次握手的斷開連接的信號(hào),而服務(wù)器發(fā)覺丟包與重新發(fā)送的斷開連接到達(dá)主機(jī)的時(shí)間正好為 2 個(gè)報(bào)文傳輸周期。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- 關(guān)于圖片的預(yù)加載過程中隱藏未知的
- js實(shí)現(xiàn)的頁面加載完畢之前l(fā)oading提示效果完整示例【附demo源碼下載】
- jQuery頁面加載初始化的3種方法(推薦)
- 基于javascript實(shí)現(xiàn)頁面加載loading效果
- pace.js頁面加載進(jìn)度條插件
- php簡(jiǎn)單計(jì)算頁面加載時(shí)間的方法
- jQuery在頁面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法
- 頁面加載完后自動(dòng)執(zhí)行一個(gè)方法的js代碼
- 兩種方法實(shí)現(xiàn)在HTML頁面加載完畢后運(yùn)行某個(gè)js
- jquery實(shí)現(xiàn)在頁面加載完畢后獲取圖片高度或?qū)挾?/a>
- jQuery頁面加載初始化常用的三種方法
相關(guān)文章
Echarts動(dòng)態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Echarts動(dòng)態(tài)加載多條折線圖的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05javascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)
下面小編就為大家?guī)硪黄猨avascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄肑S實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多,但是一般都是刷新后會(huì)重新開始計(jì)時(shí),可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí),這該怎么做呢?下面我們一起來看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。2016-08-08uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08