從輸入URL到頁面展示,這中間發(fā)生了什么弛随?

用戶輸入

當用戶在地址欄中輸入一個查詢關(guān)鍵字時瓢喉,地址欄會判斷輸入的關(guān)鍵字是搜索內(nèi)容,還是請求的 URL舀透。
如果是搜索內(nèi)容栓票,地址欄會使用瀏覽器默認的搜索引擎,來合成新的帶搜索關(guān)鍵字的URL愕够。
如果判斷輸入內(nèi)容符合 URL 規(guī)則走贪,比如輸入的是 time.geekbang.org佛猛,那么地址欄會根據(jù)規(guī)則,把這段內(nèi)容加上協(xié)議厉斟,合成為完整的 URL挚躯。
當瀏覽器剛開始加載一個地址之后,標簽頁上的圖標便進入了加載狀態(tài)擦秽。
但此時顯示的依然是之前打開的頁面內(nèi)容,并沒立即替換為請求的頁面漩勤。因為需要等待提交文檔階段感挥,頁面內(nèi)容才會被替換。

URL 請求過程

瀏覽器進程會通過進程間通信(IPC)把 URL請求發(fā)送至網(wǎng)絡(luò)進程越败,網(wǎng)絡(luò)進程接收到 URL 請求后触幼,會在這里發(fā)起真正的 URL 請求流程。
首先究飞,網(wǎng)絡(luò)進程會查找本地緩存是否緩存了該資源置谦。如果有緩存資源,那么直接返回資源給瀏覽器進程亿傅;如果在緩存中沒有查找到資源媒峡,那么直接進入網(wǎng)絡(luò)請求流程。這請求前的第一步是要進行 DNS 解析葵擎,以獲取請求域名的服務器 IP 地址谅阿。如果請求協(xié)議是 HTTPS,那么還需要建立 TLS 連接酬滤。
接下來就是利用 IP 地址和服務器建立 TCP 連接签餐。連接建立之后,瀏覽器端會構(gòu)建請求行盯串、請求頭等信息氯檐,并把和該域名相關(guān)的 Cookie 等數(shù)據(jù)附加到請求頭中,然后向服務器發(fā)送構(gòu)建的請求信息体捏。
服務器接收到請求信息后冠摄,會根據(jù)請求信息生成響應數(shù)據(jù)(包括響應行、響應頭和響應體等信息)译打,并發(fā)給網(wǎng)絡(luò)進程耗拓。等網(wǎng)絡(luò)進程接收了響應行和響應頭之后,就開始解析響應頭的內(nèi)容了奏司。
(1)重定向
在接收到服務器返回的響應頭后乔询,網(wǎng)絡(luò)進程開始解析響應頭,如果發(fā)現(xiàn)返回的狀態(tài)碼是301 或者 302韵洋,那么說明服務器需要瀏覽器重定向到其他 URL竿刁。這時網(wǎng)絡(luò)進程會從響應頭的 Location 字段里面讀取重定向的地址黄锤,然后再發(fā)起新的 HTTP 或者 HTTPS 請求,一切又重頭開始了食拜。
在導航過程中鸵熟,如果服務器響應行的狀態(tài)碼包含了 301、302 一類的跳轉(zhuǎn)信息负甸,瀏覽器會跳轉(zhuǎn)到新的地址繼續(xù)導航流强;如果響應行是 200,那么表示瀏覽器可以繼續(xù)處理該請求呻待。
(2)響應數(shù)據(jù)類型處理
Content-Type 是 HTTP 頭中一個非常重要的字段打月, 它告訴瀏覽器服務器返回的響應體數(shù)據(jù)是什么類型,然后瀏覽器會根據(jù) Content-Type 的值來決定如何顯示響應體的內(nèi)容蚕捉。
響應頭中的 Content-type 字段的值是 text/html奏篙,這就是告訴瀏覽器,服務器返回的數(shù)據(jù)是HTML 格式迫淹。
Content-Type 的值是 application/octet-stream秘通,顯示數(shù)據(jù)是字節(jié)流類型的,通常情況下敛熬,瀏覽器會按照下載類型來處理該請求肺稀。如果 Content-Type 字段的值被瀏覽器判斷為下載類型,那么該請求會被提交給瀏覽器的下載管理器荸型,同時該 URL 請求的導航流程就此結(jié)束盹靴。但如果是HTML,那么瀏覽器則會繼續(xù)進行導航流程瑞妇。由于 Chrome的頁面渲染是運行在渲染進程中的稿静,所以接下來就需要準備渲染進程了。

準備渲染進程

打開一個新頁面采用的渲染進程策略就是:通常情況下辕狰,打開新的頁面都會使用單獨的渲染進程改备;如果從 A 頁面打開 B 頁面,且 A 和 B 都屬于同一站點的話蔓倍,那么 B 頁面復用 A 頁面的渲染進程悬钳;如果是其他情況,瀏覽器進程則會為 B 創(chuàng)建一個新的渲染進程偶翅。

提交文檔

“文檔”是指 URL 請求的響應體數(shù)據(jù)默勾。
“提交文檔”的消息是由瀏覽器進程發(fā)出的,渲染進程接收到“提交文檔”的消息后聚谁,會和網(wǎng)絡(luò)進程建立傳輸數(shù)據(jù)的“管道”母剥。等文檔數(shù)據(jù)傳輸完成之后,渲染進程會返回“確認提交”的消息給瀏覽器進程。瀏覽器進程在收到“確認提交”的消息后环疼,會更新瀏覽器界面狀態(tài)习霹,包括了安全狀態(tài)、地址欄的 URL炫隶、前進后退的歷史狀態(tài)淋叶,并更新 Web 頁面。

渲染階段

一旦文檔被提交伪阶,渲染進程便開始頁面解析和子資源加載了煞檩。一旦頁面生成完成,渲染進程會發(fā)送一個消息給瀏覽器進程望门,瀏覽器接收到消息后形娇,會停止標簽圖標上的加載動畫。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末筹误,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子癣缅,更是在濱河造成了極大的恐慌厨剪,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件友存,死亡現(xiàn)場離奇詭異祷膳,居然都是意外死亡,警方通過查閱死者的電腦和手機屡立,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門直晨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人膨俐,你說我怎么就攤上這事勇皇。” “怎么了焚刺?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵敛摘,是天一觀的道長。 經(jīng)常有香客問我乳愉,道長兄淫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任蔓姚,我火速辦了婚禮捕虽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘坡脐。我一直安慰自己泄私,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挖滤,像睡著了一般崩溪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上斩松,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天伶唯,我揣著相機與錄音,去河邊找鬼惧盹。 笑死乳幸,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的钧椰。 我是一名探鬼主播粹断,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嫡霞!你這毒婦竟也來了瓶埋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤诊沪,失蹤者是張志新(化名)和其女友劉穎养筒,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體端姚,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡晕粪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了渐裸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巫湘。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖昏鹃,靈堂內(nèi)的尸體忽然破棺而出尚氛,到底是詐尸還是另有隱情,我是刑警寧澤盆顾,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布怠褐,位于F島的核電站,受9級特大地震影響您宪,放射性物質(zhì)發(fā)生泄漏奈懒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一宪巨、第九天 我趴在偏房一處隱蔽的房頂上張望磷杏。 院中可真熱鬧,春花似錦捏卓、人聲如沸极祸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽遥金。三九已至浴捆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間稿械,已是汗流浹背选泻。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留美莫,地道東北人页眯。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像厢呵,于是被迫代替她去往敵國和親窝撵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345