從輸入域名到頁面呈現(xiàn)發(fā)生了什么

一崇败、前言

我們在瀏覽器的地址欄中輸入 url 地址到頁面呈現(xiàn)收夸,實際上是客戶端向服務(wù)器端發(fā)送請求吻氧,服務(wù)器端處理請求并返回請求結(jié)果,最終呈現(xiàn)頁面的過程融欧。那么究竟這期間發(fā)生了什么奇妙的事情呢敏弃?


二卦羡、過程分析

假設(shè)我們在瀏覽器中輸入http://baidu.com:80/index.html噪馏,且假設(shè)它的 ip 地址為112.34.112.40

1. 域名解析

瀏覽器解析出域名為 www.baidu.com绿饵。

2. 查詢 ip 地址

如果瀏覽器曾經(jīng)訪問過該地址欠肾,那么該域名的 ip 地址(112.34.112.40)就會形成映射關(guān)系保存在 dns 服務(wù)器中,同時還緩存在瀏覽器和 hosts 文件里拟赊。
當(dāng)域名解析時刺桃,瀏覽器會先去本地緩存中找 ip 地址,如果沒有就去 hosts 文件中找吸祟,找到就鍵入ip地址瑟慈。如果還是沒有桃移,那么就會向本地 dns 服務(wù)器的緩存中查找,如果仍然沒有葛碧,最后就去頂級域 dns 進行查詢并逐級返回了借杰。

3. 獲取端口號

瀏覽器獲取 80 端口。如果是 https 協(xié)議进泼,端口號為 443蔗衡。

4. 建立連接(三次握手)

通過 TCP/IP 協(xié)議進行通訊并建立連接。
(1) 請求連接乳绕。瀏覽器向服務(wù)器發(fā)送 SYN 數(shù)據(jù)包和 seq 序列號绞惦,告訴服務(wù)器我能發(fā)送請求。
(2) 確認(rèn)信息洋措。服務(wù)器向瀏覽器發(fā)送 ACK济蝉、SYN數(shù)據(jù)包和 seq 序列號,告訴瀏覽器我能接收請求呻纹。
(3) 握手結(jié)束堆生。瀏覽器向服務(wù)器發(fā)送 ACK、SYN數(shù)據(jù)包和 seq 序列號雷酪,告訴服務(wù)器我知道你能接收請求了淑仆。

5. 發(fā)送請求

成功建立連接后,瀏覽器向服務(wù)器發(fā)送請求哥力。

6. 處理請求

服務(wù)器接收到請求并分析處理請求蔗怠。

7. 返回結(jié)果

服務(wù)器將請求的數(shù)據(jù)結(jié)果返回給瀏覽器。

8. 斷開連接(四次揮手)

通過 TCP/IP 協(xié)議斷開連接吩跋。
(1) 請求斷開寞射。服務(wù)器向瀏覽器發(fā)送 FIN 數(shù)據(jù)包,告訴瀏覽器锌钮,我數(shù)據(jù)發(fā)送完畢可以斷開連接了桥温。
(2) 已接收斷開請求。瀏覽器向服務(wù)器發(fā)送 ACK 數(shù)據(jù)包梁丘,告訴服務(wù)器侵浸,我知道你數(shù)據(jù)發(fā)送完畢了,但是我還在繼續(xù)接收數(shù)據(jù)中氛谜。
(3) 同意斷開掏觉。瀏覽器向服務(wù)器發(fā)送 FIN 數(shù)據(jù)包,告訴服務(wù)器值漫,數(shù)據(jù)我接收完畢了我同意斷開連接了澳腹。
(4) 已接收同意請求。服務(wù)器接收到同意斷開的信息,正式斷開連接酱塔。

9. 頁面呈現(xiàn)

接收完數(shù)據(jù)的瀏覽器開始解析 DOM 結(jié)構(gòu)沥邻,渲染頁面。至此完成整個過程羊娃。


三谋国、圖示

yuming.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市迁沫,隨后出現(xiàn)的幾起案子芦瘾,更是在濱河造成了極大的恐慌,老刑警劉巖集畅,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件近弟,死亡現(xiàn)場離奇詭異,居然都是意外死亡挺智,警方通過查閱死者的電腦和手機祷愉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赦颇,“玉大人二鳄,你說我怎么就攤上這事∶角樱” “怎么了订讼?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扇苞。 經(jīng)常有香客問我欺殿,道長,這世上最難降的妖魔是什么鳖敷? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任脖苏,我火速辦了婚禮,結(jié)果婚禮上定踱,老公的妹妹穿的比我還像新娘棍潘。我一直安慰自己,他們只是感情好崖媚,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布亦歉。 她就那樣靜靜地躺著,像睡著了一般至扰。 火紅的嫁衣襯著肌膚如雪鳍徽。 梳的紋絲不亂的頭發(fā)上资锰,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天敢课,我揣著相機與錄音,去河邊找鬼。 笑死直秆,一個胖子當(dāng)著我的面吹牛濒募,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播圾结,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼瑰剃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筝野?” 一聲冷哼從身側(cè)響起晌姚,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎歇竟,沒想到半個月后挥唠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡焕议,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年宝磨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盅安。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡唤锉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出别瞭,到底是詐尸還是另有隱情窿祥,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布蝙寨,位于F島的核電站壁肋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏籽慢。R本人自食惡果不足惜浸遗,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望箱亿。 院中可真熱鬧跛锌,春花似錦、人聲如沸届惋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脑豹。三九已至郑藏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瘩欺,已是汗流浹背必盖。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工拌牲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人歌粥。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓塌忽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親失驶。 傳聞我的和親對象是個殘疾皇子土居,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

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