從 輸入網(wǎng)址(URL)到頁面展示中間發(fā)生了什么

從輸入U(xiǎn)RL到展示頁面分為5步,總流程為:


第1步:用戶輸入url網(wǎng)址(URL)

?用戶輸入url(也就是我們說的網(wǎng)址,也是統(tǒng)一資源定義符,用于定義互聯(lián)網(wǎng)資源)

比如輸入https://www.baidu.com

其中https為協(xié)議

baidu.com是域名

www:World Wide Web”首字母的縮寫形式钝凶〖牛“WWW”在我國曾被譯為“環(huán)球網(wǎng)”纺棺、“環(huán)球信息網(wǎng)”、“超媒體環(huán)球信息網(wǎng)”等,為什么要加,我猜是規(guī)范,有些網(wǎng)址不加www也能訪問

有時(shí)候域名后面會(huì)跟端口號如xxx.com:8080,8080就是端口號


互聯(lián)網(wǎng)上的每一臺計(jì)算機(jī)纬纪,都會(huì)分配到一個(gè)IP地址,規(guī)定網(wǎng)絡(luò)地址的協(xié)議岁钓,叫做IP協(xié)議渗常。它所定義的地址,就被稱為IP地址,那為什么我們輸入網(wǎng)址而不是IP地址?因?yàn)榫W(wǎng)址是語義化的好記憶,而IP是類似:192.168.1.0,不易人記憶.

2.? IP尋址:瀏覽器根據(jù)輸入的網(wǎng)址去尋找它對應(yīng)的IP地址

首先需了解

DNS(網(wǎng)域名稱系統(tǒng)):?互聯(lián)網(wǎng)的一項(xiàng)服務(wù),它作為將域名IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫血淌,能夠使人更方便地訪問互聯(lián)網(wǎng),DNS使用TCPUDP端口53;

DNS解析是一種在服務(wù)器上尋找資源的過程;

TCP:為了解決這個(gè)問題,提高網(wǎng)絡(luò)可靠性财剖,TCP協(xié)議就誕生了悠夯。這個(gè)協(xié)議非常復(fù)雜,但可以近似認(rèn)為躺坟,它就是有確認(rèn)機(jī)制的UDP協(xié)議沦补,每發(fā)出一個(gè)數(shù)據(jù)包都要求確認(rèn)。如果有一個(gè)數(shù)據(jù)包遺失咪橙,就收不到確認(rèn)夕膀,發(fā)出方就知道有必要重發(fā)這個(gè)數(shù)據(jù)包了。因此TCP協(xié)議能夠確保數(shù)據(jù)不會(huì)遺失美侦。

它的缺點(diǎn)是過程復(fù)雜店诗、實(shí)現(xiàn)困難、消耗較多的資源音榜。TCP協(xié)議具體實(shí)現(xiàn)是"三次握手":如圖:

UDP : 我們必須在數(shù)據(jù)包中加入端口信息庞瘸,這就需要新的協(xié)議。最簡單的實(shí)現(xiàn)叫做UDP協(xié)議,UDP數(shù)據(jù)包赠叼,也是由"標(biāo)頭"和"數(shù)據(jù)"UDP協(xié)議的優(yōu)點(diǎn)是比較簡單擦囊,容易實(shí)現(xiàn).

缺點(diǎn):可靠性較差,一旦數(shù)據(jù)包發(fā)出嘴办,無法知道對方是否收到瞬场。


網(wǎng)址到IP地址的轉(zhuǎn)換,這個(gè)過程就是DNS解析涧郊,實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換,其步驟如下

域名解析:

1.先從瀏覽器緩存里找IP,因?yàn)闉g覽器會(huì)緩存DNS記錄一段時(shí)間

2.如沒找到,再從Hosts文件查找是否有該域名和對應(yīng)IP

3.如沒找到,再從路由器緩存找

4.如沒好到,再從DNS緩存查找

5.如果都沒找到,瀏覽器域名服務(wù)器向根域名服務(wù)器(baidu.com)查找域名對應(yīng)IP,還沒找到就把請求轉(zhuǎn)發(fā)到下一級,直到找到IP

補(bǔ)充:什么是dns劫持:黑客攻擊根域名服務(wù)器的節(jié)點(diǎn),發(fā)生在上面第四步,從DNS緩存數(shù)據(jù)庫里找時(shí)被惡意改為其他的網(wǎng)址,所以請求到的是其他網(wǎng)址.

3.服務(wù)器處理

服務(wù)器:是一臺安裝了系統(tǒng)的機(jī)器,常見的系統(tǒng)如linux,windows server2012,系統(tǒng)里安裝的處理請求應(yīng)用叫 Web server,常用Web服務(wù)器有Apache.


處理流程如圖:


Rails路由匹配網(wǎng)址,通過控制器從數(shù)據(jù)里取出模型數(shù)據(jù),顯示到視圖.簡稱為MVC模式.而前端開發(fā)者專注在上圖的視圖view的處理.

4 瀏覽器處理?

服務(wù)器通過后臺語言程序處理,找到數(shù)據(jù)返回給瀏覽器: HTML字符串被瀏覽器接收后一句句讀取解析,解析到link標(biāo)簽后重新發(fā)送請求獲取css,解析到script標(biāo)簽后發(fā)送請求獲取js,并執(zhí)行代碼

5.繪制網(wǎng)頁

關(guān)于瀏覽器引擎渲染: 不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同贯被,因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染(顯示)效果也可能不同,這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果;可以閱讀:瀏覽器內(nèi)核和javascript引擎

瀏覽器根據(jù)HTML和CSS計(jì)算得到渲染樹,繪制到屏幕上,js會(huì)被執(zhí)行.


這篇文章涉及的東西太多,花了很長時(shí)間整理,面試也經(jīng)常問到,作為一個(gè)前端自然好奇真相.?

備注:如需了解IP尋址的細(xì)節(jié)和htttp協(xié)議請點(diǎn)擊:互聯(lián)網(wǎng)協(xié)議入門(一),互聯(lián)網(wǎng)協(xié)議入門(二)

參考資料:

阮一峰互聯(lián)網(wǎng)協(xié)議入門?;?

DNS解析.

—————————————————————————————————————

"聽很多大神說寫博客可以提高技術(shù)水平,以后會(huì)養(yǎng)成寫博客習(xí)慣,也是方便自己復(fù)習(xí)".

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市彤灶,隨后出現(xiàn)的幾起案子看幼,更是在濱河造成了極大的恐慌,老刑警劉巖幌陕,帶你破解...
    沈念sama閱讀 221,331評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诵姜,死亡現(xiàn)場離奇詭異,居然都是意外死亡搏熄,警方通過查閱死者的電腦和手機(jī)棚唆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,372評論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來心例,“玉大人宵凌,你說我怎么就攤上這事≈购螅” “怎么了瞎惫?”我有些...
    開封第一講書人閱讀 167,755評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坯门。 經(jīng)常有香客問我微饥,道長,這世上最難降的妖魔是什么古戴? 我笑而不...
    開封第一講書人閱讀 59,528評論 1 296
  • 正文 為了忘掉前任欠橘,我火速辦了婚禮,結(jié)果婚禮上现恼,老公的妹妹穿的比我還像新娘肃续。我一直安慰自己,他們只是感情好叉袍,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,526評論 6 397
  • 文/花漫 我一把揭開白布始锚。 她就那樣靜靜地躺著,像睡著了一般喳逛。 火紅的嫁衣襯著肌膚如雪瞧捌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,166評論 1 308
  • 那天润文,我揣著相機(jī)與錄音姐呐,去河邊找鬼。 笑死典蝌,一個(gè)胖子當(dāng)著我的面吹牛曙砂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骏掀,決...
    沈念sama閱讀 40,768評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼鸠澈,長吁一口氣:“原來是場噩夢啊……” “哼柱告!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起笑陈,我...
    開封第一講書人閱讀 39,664評論 0 276
  • 序言:老撾萬榮一對情侶失蹤际度,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后新锈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甲脏,經(jīng)...
    沈念sama閱讀 46,205評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡眶熬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,290評論 3 340
  • 正文 我和宋清朗相戀三年妹笆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片娜氏。...
    茶點(diǎn)故事閱讀 40,435評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拳缠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出贸弥,到底是詐尸還是另有隱情窟坐,我是刑警寧澤,帶...
    沈念sama閱讀 36,126評論 5 349
  • 正文 年R本政府宣布绵疲,位于F島的核電站哲鸳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盔憨。R本人自食惡果不足惜徙菠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,804評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望郁岩。 院中可真熱鬧婿奔,春花似錦、人聲如沸问慎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,276評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽如叼。三九已至冰木,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間笼恰,已是汗流浹背踊沸。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挖腰,地道東北人雕沿。 一個(gè)月前我還...
    沈念sama閱讀 48,818評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像猴仑,于是被迫代替她去往敵國和親审轮。 傳聞我的和親對象是個(gè)殘疾皇子肥哎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,442評論 2 359

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