從輸入地址到頁面展現(xiàn)過程背后的故事

當(dāng)我們在瀏覽器中輸入www.baidu.com并按下回車時(shí)赤赊,瀏覽器就會(huì)給我們打開百度的首頁面。瀏覽器打開任何一個(gè)頁面都需要一定的時(shí)間谤绳,那么從我們輸入地址到頁面展現(xiàn)這一段時(shí)間中睦霎,究竟發(fā)生了哪些事情呢?

一犀勒、識(shí)別URL

URL,全稱統(tǒng)一資源定位符,用于定位用戶所輸入的網(wǎng)站資源贾费。完整的URL是由協(xié)議(比如http钦购,ftp)、域名(比如baidu.com)褂萧、文件路徑(比如/1441477.html)和端口(比如:80)四個(gè)部分組成的押桃。

二、域名解析

互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址箱玷,但是IP地址并不方便記憶怨规。用戶更喜歡用方便記憶的網(wǎng)址去尋找互聯(lián)網(wǎng)上的其它計(jì)算機(jī)陌宿,也就是上面提到的百度的網(wǎng)址锡足。因此瀏覽器必須要知道網(wǎng)站的IP地址才可以真正地向網(wǎng)站發(fā)出請(qǐng)求。而將域名轉(zhuǎn)換為IP的壳坪,就是DNS
DNS查詢的過程一般按下面次序進(jìn)行

  1. 瀏覽器緩存
  2. 系統(tǒng)緩存(本地host文件)
  3. 路由器緩存
  4. ISP(互聯(lián)網(wǎng)服務(wù)提供商)DNS緩存
  5. 根域名服務(wù)器
  6. 頂級(jí)域名服務(wù)器
  7. 主域名服務(wù)器  
    關(guān)于DNS解析詳細(xì)內(nèi)容可以參考這篇文章

三舶得、建立TCP連接

HTTP協(xié)議是建立在TCP協(xié)議之上的一種應(yīng)用,在獲取到服務(wù)器的IP地址后爽蝴,瀏覽器需要開始與服務(wù)器之間建立TCP連接沐批,這其中要經(jīng)過三次握手。這部分涉及到計(jì)算機(jī)網(wǎng)絡(luò)的相關(guān)知識(shí)蝎亚,可參考TCP三次握手簡述

四九孩、瀏覽器發(fā)起http請(qǐng)求

發(fā)送HTTP請(qǐng)求的過程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過TCP協(xié)議中發(fā)送到服務(wù)器指定端口(HTTP協(xié)議80/8080, HTTPS協(xié)議443)。HTTP請(qǐng)求報(bào)文是由三部分組成:

  1. 請(qǐng)求方法URI協(xié)議/版本

請(qǐng)求方法有GET, POST, PUT, DELETE等等

  1. 請(qǐng)求頭(Request Header)

請(qǐng)求頭包含許多有關(guān)的客戶端環(huán)境和請(qǐng)求正文的有用信息发框。例如躺彬,請(qǐng)求頭可以聲明瀏覽器所用的語言,請(qǐng)求正文的長度等

  1. 請(qǐng)求正文
    請(qǐng)求正文中可以包含客戶提交的查詢字符串信息梅惯,或者想服務(wù)器提交的數(shù)據(jù)等

五宪拥、服務(wù)器響應(yīng)返回?cái)?shù)據(jù)

服務(wù)器拿到請(qǐng)求之后會(huì)根據(jù)請(qǐng)求的方法、訪問的路徑铣减、提交的參數(shù)等進(jìn)行處理她君,返回一個(gè)HTTP響應(yīng),HTTP響應(yīng)報(bào)文也是由三部分組成:

  1. 響應(yīng)行

響應(yīng)行一般包含協(xié)議版本葫哗、狀態(tài)碼及其描述組成

  1. 響應(yīng)頭

響應(yīng)報(bào)頭與請(qǐng)求頭類似缔刹,為響應(yīng)報(bào)文添加了一些附加信息

  1. 響應(yīng)體
    響應(yīng)體就是響應(yīng)的消息體,如果是純數(shù)據(jù)就是返回純數(shù)據(jù)劣针,如果請(qǐng)求的是HTML頁面校镐,那么返回的就是HTML代碼,如果是JS就是JS代碼酿秸,如此之類

六灭翔、瀏覽器解析、渲染

這樣瀏覽器就接收到了服務(wù)器返回的html文件后就開始逐行解析文件的內(nèi)容。瀏覽器在解析過程中肝箱,如果遇到請(qǐng)求外部資源時(shí)哄褒,如圖像,JS等。瀏覽器將重復(fù)四煌张、五過程下載該資源呐赡。
瀏覽器是一個(gè)邊解析邊渲染的過程。首先瀏覽器解析HTML文件構(gòu)建DOM樹骏融,然后解析CSS文件構(gòu)建渲染樹链嘀,等到渲染樹構(gòu)建完成后,瀏覽器開始布局渲染樹并將其繪制到屏幕上档玻。
瀏覽器渲染原理

七怀泊、頁面展現(xiàn)

待瀏覽器將頁面全部渲染完之后,一個(gè)完整的百度頁面就成功的展現(xiàn)在我們面前啦误趴!


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末霹琼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子凉当,更是在濱河造成了極大的恐慌枣申,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件看杭,死亡現(xiàn)場離奇詭異忠藤,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)楼雹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門模孩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人烘豹,你說我怎么就攤上這事瓜贾。” “怎么了携悯?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵祭芦,是天一觀的道長。 經(jīng)常有香客問我憔鬼,道長龟劲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任轴或,我火速辦了婚禮昌跌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘照雁。我一直安慰自己蚕愤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著萍诱,像睡著了一般悬嗓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上裕坊,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天包竹,我揣著相機(jī)與錄音,去河邊找鬼籍凝。 笑死周瞎,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的饵蒂。 我是一名探鬼主播声诸,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼苹享!你這毒婦竟也來了双絮?” 一聲冷哼從身側(cè)響起候引,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤拉一,失蹤者是張志新(化名)和其女友劉穎页藻,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宫纬,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年膏萧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了漓骚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡榛泛,死狀恐怖蝌蹂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情曹锨,我是刑警寧澤孤个,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站沛简,受9級(jí)特大地震影響齐鲤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜椒楣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一给郊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捧灰,春花似錦淆九、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煤搜,卻和暖如春免绿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背擦盾。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國打工嘲驾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人迹卢。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓辽故,卻偏偏與公主長得像,于是被迫代替她去往敵國和親腐碱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子誊垢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

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