用戶從輸入url到頁面渲染經歷了什么過程

回答1

接下來,便進入了頁面資源請求過程稳强。這時,瀏覽器進程會通過進程間通信(IPC)把 URL 請求發(fā)送至網絡進程鸽素,網絡進程接收到 URL 請求后亦鳞,會在這里發(fā)起真正的 URL 請求流程燕差。那具體流程是怎樣的呢?首先坐梯,網絡進程會查找本地緩存是否緩存了該資源。如果有緩存資源偷溺,那么直接返回資源給瀏覽器進程;如果在緩存中沒有查找到資源钱贯,那么直接進入網絡請求流程秩命。這請求前的第一步是要進行 DNS 解析,以獲取請求域名的服務器 IP 地址弃锐。如果請求協議是 HTTPS袄友,那么還需要建立 TLS 連接。接下來就是利用 IP 地址和服務器建立 TCP 連接霹菊。連接建立之后剧蚣,瀏覽器端會構建請求行、請求頭等信息旋廷,并把和該域名相關的 Cookie 等數據附加到請求頭中鸠按,然后向服務器發(fā)送構建的請求信息。服務器接收到請求信息后饶碘,會根據請求信息生成響應數據(包括響應行目尖、響應頭和響應體等信息),并發(fā)給網絡進程扎运。等網絡進程接收了響應行和響應頭之后瑟曲,就開始解析響應頭的內容了。(為了方便講述,下面我將服務器返回的響應頭和響應行統稱為響應頭。)

回答2

  1. 用戶輸入URL启泣,瀏覽器會根據用戶輸入的信息判斷是搜索還是網址,如果是搜索內容纱耻,就將搜索內容+默認搜索引擎合成新的URL蘑志;如果用戶輸入的內容符合URL規(guī)則,瀏覽器就會根據URL協議,在這段內容上加上協議合成合法的URL
  2. 用戶輸入完內容突委,按下回車鍵敌蚜,瀏覽器導航欄顯示loading狀態(tài)齐媒,但是頁面還是呈現前一個頁面,這是因為新頁面的響應數據還沒有獲得
  3. 瀏覽器進程瀏覽器構建請求行信息,會通過進程間通信(IPC)將URL請求發(fā)送給網絡進程
    GET /index.html HTTP1.1
  4. 網絡進程獲取到URL,先去本地緩存中查找是否有緩存文件腕侄,如果有酸茴,攔截請求魁淳,直接200返回昆稿;否則喳瓣,進入網絡請求過程
  5. 網絡進程請求DNS返回域名對應的IP和端口號仿滔,如果之前DNS數據緩存服務緩存過當前域名信息腰埂,就會直接返回緩存信息丈挟;否則例朱,發(fā)起請求獲取根據域名解析出來的IP和端口號,如果沒有端口號,http默認80绞灼,https默認443。如果是https請求,還需要建立TLS連接。
  6. Chrome 有個機制,同一個域名同時最多只能建立 6 個TCP 連接陆馁,如果在同一個域名下同時有 10 個請求發(fā)生彪蓬,那么其中 4 個請求會進入排隊等待狀態(tài),直至進行中的請求完成伞梯。如果當前請求數量少于6個,會直接建立TCP連接。
  7. TCP三次握手建立連接皱炉,http請求加上TCP頭部——包括源端口號惯退、目的程序端口號和用于校驗數據完整性的序號,向下傳輸
  8. 網絡層在數據包上加上IP頭部——包括源IP地址和目的IP地址者娱,繼續(xù)向下傳輸到底層
  9. 底層通過物理網絡傳輸給目的服務器主機
  10. 目的服務器主機網絡層接收到數據包,解析出IP頭部梅垄,識別出數據部分,將解開的數據包向上傳輸到傳輸層
  11. 目的服務器主機傳輸層獲取到數據包,解析出TCP頭部践图,識別端口,將解開的數據包向上傳輸到應用層
  12. 應用層HTTP解析請求頭和請求體,如果需要重定向斩熊,HTTP直接返回HTTP響應數據的狀態(tài)code301或者302,同時在請求頭的Location字段中附上重定向地址尤溜,瀏覽器會根據code和Location進行重定向操作绝葡;如果不是重定向,首先服務器會根據 請求頭中的If-None-Match 的值來判斷請求的資源是否被更新溅呢,如果沒有更新,就返回304狀態(tài)碼铣墨,相當于告訴瀏覽器之前的緩存還可以使用碱妆,就不返回新數據了疹尾;否則繁成,返回新數據尊搬,200的狀態(tài)碼袭祟,并且如果想要瀏覽器緩存數據的話,就在相應頭中加入字段:
    Cache-Control:Max-age=2000
    響應數據又順著應用層——傳輸層——網絡層——網絡層——傳輸層——應用層的順序返回到網絡進程
  13. 數據傳輸完成跟继,TCP四次揮手斷開連接种冬。如果,瀏覽器或者服務器在HTTP頭部加上如下信息舔糖,TCP就一直保持連接娱两。保持TCP連接可以省下下次需要建立連接的時間,提示資源加載速度
    Connection:Keep-Alive
  14. 網絡進程將獲取到的數據包進行解析金吗,根據響應頭中的Content-type來判斷響應數據的類型十兢,如果是字節(jié)流類型,就將該請求交給下載管理器摇庙,該導航流程結束旱物,不再進行;如果是text/html類型卫袒,就通知瀏覽器進程獲取到文檔準備渲染
  15. 瀏覽器進程獲取到通知宵呛,根據當前頁面B是否是從頁面A打開的并且和頁面A是否是同一個站點(根域名和協議一樣就被認為是同一個站點),如果滿足上述條件夕凝,就復用之前網頁的進程宝穗,否則封孙,新創(chuàng)建一個單獨的渲染進程
  16. 瀏覽器會發(fā)出“提交文檔”的消息給渲染進程,渲染進程收到消息后讽营,會和網絡進程建立傳輸數據的“管道”,文檔數據傳輸完成后泡徙,渲染進程會返回“確認提交”的消息給瀏覽器進程
  17. 瀏覽器收到“確認提交”的消息后橱鹏,會更新瀏覽器的頁面狀態(tài),包括了安全狀態(tài)堪藐、地址欄的 URL莉兰、前進后退的歷史狀態(tài),并更新web頁面礁竞,此時的web頁面是空白頁
  18. 渲染進程對文檔進行頁面解析和子資源加載糖荒,HTML 通過HTM 解析器轉成DOM Tree(二叉樹類似結構的東西),CSS按照CSS 規(guī)則和CSS解釋器轉成CSSOM TREE模捂,兩個tree結合捶朵,形成render tree(不包含HTML的具體元素和元素要畫的具體位置),通過Layout可以計算出每個元素具體的寬高顏色位置狂男,結合起來综看,開始繪制,最后顯示在屏幕中新頁面顯示出來

回答3

結合老師的講義岖食,自己總結了下红碑,不考慮用戶輸入搜索關鍵字的情況:
1,用戶輸入url并回車
2泡垃,瀏覽器進程檢查url析珊,組裝協議,構成完整的url
3蔑穴,瀏覽器進程通過進程間通信(IPC)把url請求發(fā)送給網絡進程
4忠寻,網絡進程接收到url請求后檢查本地緩存是否緩存了該請求資源,如果有則將該資源返回給瀏覽器進程
5存和,如果沒有锡溯,網絡進程向web服務器發(fā)起http請求(網絡請求),請求流程如下:
5.1 進行DNS解析哑姚,獲取服務器ip地址祭饭,端口(端口是通過dns解析獲取的嗎?這里有個疑問)
5.2 利用ip地址和服務器建立tcp連接
5.3 構建請求頭信息
5.4 發(fā)送請求頭信息
5.5 服務器響應后叙量,網絡進程接收響應頭和響應信息倡蝙,并解析響應內容
6,網絡進程解析響應流程绞佩;
6.1 檢查狀態(tài)碼寺鸥,如果是301/302猪钮,則需要重定向,從Location自動中讀取地址胆建,重新進行第4步
(301/302跳轉也會讀取本地緩存嗎烤低?這里有個疑問),如果是200笆载,則繼續(xù)處理請求扑馁。
6.2 200響應處理:
檢查響應類型Content-Type,如果是字節(jié)流類型凉驻,則將該請求提交給下載管理器腻要,該導航流程結束,不再進行
后續(xù)的渲染涝登,如果是html則通知瀏覽器進程準備渲染進程準備進行渲染雄家。
7,準備渲染進程
7.1 瀏覽器進程檢查當前url是否和之前打開的渲染進程根域名是否相同胀滚,如果相同趟济,則復用原來的進程,如果不同咽笼,則開啟新的渲染進程
8. 傳輸數據咙好、更新狀態(tài)
8.1 渲染進程準備好后,瀏覽器向渲染進程發(fā)起“提交文檔”的消息褐荷,渲染進程接收到消息和網絡進程建立傳輸數據的“管道”
8.2 渲染進程接收完數據后勾效,向瀏覽器發(fā)送“確認提交”
8.3 瀏覽器進程接收到確認消息后更新瀏覽器界面狀態(tài):安全、地址欄url叛甫、前進后退的歷史狀態(tài)层宫、更新web頁面。

refer to https://time.geekbang.org/column/article/117637

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末其监,一起剝皮案震驚了整個濱河市萌腿,隨后出現的幾起案子,更是在濱河造成了極大的恐慌抖苦,老刑警劉巖毁菱,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異锌历,居然都是意外死亡贮庞,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門究西,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窗慎,“玉大人,你說我怎么就攤上這事≌诔猓” “怎么了峦失?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長术吗。 經常有香客問我尉辑,道長,這世上最難降的妖魔是什么较屿? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任隧魄,我火速辦了婚禮,結果婚禮上吝镣,老公的妹妹穿的比我還像新娘。我一直安慰自己昆庇,他們只是感情好末贾,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著整吆,像睡著了一般拱撵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上表蝙,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天拴测,我揣著相機與錄音,去河邊找鬼府蛇。 笑死集索,一個胖子當著我的面吹牛,可吹牛的內容都是我干的汇跨。 我是一名探鬼主播务荆,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼穷遂!你這毒婦竟也來了函匕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤蚪黑,失蹤者是張志新(化名)和其女友劉穎盅惜,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體忌穿,經...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡抒寂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了掠剑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蓬推。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖澡腾,靈堂內的尸體忽然破棺而出沸伏,到底是詐尸還是另有隱情糕珊,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布毅糟,位于F島的核電站红选,受9級特大地震影響,放射性物質發(fā)生泄漏姆另。R本人自食惡果不足惜喇肋,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望迹辐。 院中可真熱鬧蝶防,春花似錦、人聲如沸明吩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽印荔。三九已至低葫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間仍律,已是汗流浹背嘿悬。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留水泉,地道東北人善涨。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像草则,于是被迫代替她去往敵國和親躯概。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容