深度解析URL到頁(yè)面渲染的全過(guò)程

人生就像一列開(kāi)往墳?zāi)沟牧熊?chē)棘街,路途上會(huì)有很多站矮男,很難有人至始至終陪你走完全程移必,當(dāng)陪你的人要下車(chē)時(shí),即便不舍毡鉴,也要心存感激崔泵,然后揮手告別。---sunnyhuang

URL

URL統(tǒng)一資源定位符猪瞬,用于互聯(lián)網(wǎng)上不同的資源的標(biāo)識(shí)憎瘸,就像不同的人有不同的身份證一樣。

URL的組成

URL的組成
  1. 協(xié)議
  2. 域名 (有時(shí)候也是ip,)
  3. 端口號(hào)(數(shù)字表示陈瘦,若為HTTP的默認(rèn)值“:80”可省略)
  4. 路徑(以“/”字符區(qū)別路徑中的每一個(gè)目錄名稱)
  5. 查詢(GET模式的窗體參數(shù)幌甘,以“?”字符為起點(diǎn),每個(gè)參數(shù)以“&”隔開(kāi),再以“=”分開(kāi)參數(shù)名稱與數(shù)據(jù)锅风,通常以UTF8的URL編碼酥诽,避開(kāi)字符沖突的問(wèn)題)

在瀏覽器輸入url后的訪問(wèn)

1. 域名解析

瀏覽器會(huì)把輸入的域名解析成對(duì)應(yīng)的ip,解析分為幾部分進(jìn)行皱埠。

  1. 查看瀏覽器內(nèi)部緩存肮帐,如果查到域名對(duì)應(yīng)的ip,就發(fā)送和接受參數(shù)和數(shù)據(jù)
  2. 查看本機(jī)的host文件边器,瀏覽器會(huì)在本機(jī)的hosts文件查看是否有對(duì)應(yīng)的ip服務(wù)器地址训枢。
  3. 查看本地路由器的DNS緩存,找到對(duì)應(yīng)的ip
  4. 查看網(wǎng)絡(luò)服務(wù)商中DNS服務(wù)器
  5. 查詢根域名下是否存在忘巧。
    上述5步找到對(duì)應(yīng)的ip地址后
  6. 詢到目標(biāo)IP地址后,則開(kāi)始建立 TCP 三次握手 ,與目標(biāo)服務(wù)器建立連接肮砾。
  7. 通過(guò)規(guī)定的協(xié)議(http)向目標(biāo)主機(jī)發(fā)送請(qǐng)求

2. 服務(wù)器接收到請(qǐng)求和返回?cái)?shù)據(jù)

服務(wù)器:安裝了系統(tǒng)和web-server的主機(jī),可以理解為一臺(tái)電腦袋坑,安裝了系統(tǒng)和軟件來(lái)處理數(shù)據(jù)(硬件)

  1. 服務(wù)器接收到了瀏覽器發(fā)送的請(qǐng)求后仗处,根據(jù)某個(gè)協(xié)議,通過(guò)web-server把瀏覽器發(fā)送的數(shù)據(jù)進(jìn)行打包(包含請(qǐng)求頭枣宫,ip地址婆誓,請(qǐng)求路徑和查詢參數(shù)等)
  2. web-server把數(shù)據(jù)打包后,發(fā)送給網(wǎng)站代碼(比如django也颤、flask洋幻、node.js等后端服務(wù))
  3. 后端服務(wù)軟件會(huì)根據(jù)路徑和查詢參數(shù)進(jìn)行相應(yīng)處理,返回給瀏覽器對(duì)應(yīng)的數(shù)據(jù)包(包括http協(xié)議組成的代碼翅娶。里面包含頁(yè)面的布局文留、文字。數(shù)據(jù)也可能是圖片竭沫、腳本程序燥翅,反應(yīng)頭,反應(yīng)數(shù)據(jù)蜕提,請(qǐng)求頭等)

3. 瀏覽器的接受數(shù)據(jù)和頁(yè)面渲染

  1. 瀏覽器接收到返回的數(shù)據(jù)包森书,根據(jù)瀏覽器的渲染機(jī)制對(duì)相應(yīng)的數(shù)據(jù)進(jìn)行渲染。
  2. 渲染后的數(shù)據(jù)谎势,進(jìn)行相應(yīng)的頁(yè)面呈現(xiàn)和腳步的交互凛膏。

上訴3大點(diǎn)1. 域名解析。2.服務(wù)器接受脏榆。3.瀏覽器的渲染就是用戶輸入一個(gè)域名到頁(yè)面呈現(xiàn)的內(nèi)容猖毫。

解析服務(wù)器中網(wǎng)站代碼處理處理的流程

1.MOV模型

MVC模型(model-view-controller

主要是第三步到第七步解析

  1. 用戶的請(qǐng)求數(shù)據(jù)通過(guò)控制器交給模型來(lái)處理(圖中的2)
  2. 模型根據(jù)用戶的請(qǐng)求數(shù)據(jù),在數(shù)據(jù)庫(kù)中查詢须喂,調(diào)用相應(yīng)的數(shù)據(jù)返回給控制器(圖中的345)
  3. 控制器得到數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)后吁断,交給視圖模板填充形成頁(yè)面的模板(頁(yè)面基本的代碼成型)
  4. 視圖模板填充好后典唇,把數(shù)據(jù)反饋給控制器
  5. 控制器將數(shù)據(jù)反饋給瀏覽器
  6. 瀏覽器得到數(shù)據(jù)后,進(jìn)行相應(yīng)的渲染胯府,呈現(xiàn)給用戶介衔。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市骂因,隨后出現(xiàn)的幾起案子炎咖,更是在濱河造成了極大的恐慌,老刑警劉巖寒波,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乘盼,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡俄烁,警方通過(guò)查閱死者的電腦和手機(jī)绸栅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)页屠,“玉大人粹胯,你說(shuō)我怎么就攤上這事〕狡螅” “怎么了风纠?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)牢贸。 經(jīng)常有香客問(wèn)我竹观,道長(zhǎng),這世上最難降的妖魔是什么潜索? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任臭增,我火速辦了婚禮,結(jié)果婚禮上竹习,老公的妹妹穿的比我還像新娘誊抛。我一直安慰自己,他們只是感情好由驹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布芍锚。 她就那樣靜靜地躺著昔园,像睡著了一般蔓榄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上默刚,一...
    開(kāi)封第一講書(shū)人閱讀 51,775評(píng)論 1 307
  • 那天甥郑,我揣著相機(jī)與錄音,去河邊找鬼荤西。 笑死澜搅,一個(gè)胖子當(dāng)著我的面吹牛伍俘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播勉躺,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼癌瘾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了饵溅?” 一聲冷哼從身側(cè)響起妨退,我...
    開(kāi)封第一講書(shū)人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蜕企,沒(méi)想到半個(gè)月后咬荷,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡轻掩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年幸乒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唇牧。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罕扎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出丐重,到底是詐尸還是另有隱情壳影,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布弥臼,位于F島的核電站宴咧,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏径缅。R本人自食惡果不足惜掺栅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纳猪。 院中可真熱鬧氧卧,春花似錦、人聲如沸氏堤。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鼠锈。三九已至闪檬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間购笆,已是汗流浹背粗悯。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留同欠,地道東北人样傍。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓横缔,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親衫哥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子茎刚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

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