回答1
接下來,便進入了頁面資源請求過程稳强。這時,瀏覽器進程會通過進程間通信(IPC)把 URL 請求發(fā)送至網絡進程鸽素,網絡進程接收到 URL 請求后亦鳞,會在這里發(fā)起真正的 URL 請求流程燕差。那具體流程是怎樣的呢?首先坐梯,網絡進程會查找本地緩存是否緩存了該資源。如果有緩存資源偷溺,那么直接返回資源給瀏覽器進程;如果在緩存中沒有查找到資源钱贯,那么直接進入網絡請求流程秩命。這請求前的第一步是要進行 DNS 解析,以獲取請求域名的服務器 IP 地址弃锐。如果請求協議是 HTTPS袄友,那么還需要建立 TLS 連接。接下來就是利用 IP 地址和服務器建立 TCP 連接霹菊。連接建立之后剧蚣,瀏覽器端會構建請求行、請求頭等信息旋廷,并把和該域名相關的 Cookie 等數據附加到請求頭中鸠按,然后向服務器發(fā)送構建的請求信息。服務器接收到請求信息后饶碘,會根據請求信息生成響應數據(包括響應行目尖、響應頭和響應體等信息),并發(fā)給網絡進程扎运。等網絡進程接收了響應行和響應頭之后瑟曲,就開始解析響應頭的內容了。(為了方便講述,下面我將服務器返回的響應頭和響應行統稱為響應頭。)
回答2
- 用戶輸入URL启泣,瀏覽器會根據用戶輸入的信息判斷是搜索還是網址,如果是搜索內容纱耻,就將搜索內容+默認搜索引擎合成新的URL蘑志;如果用戶輸入的內容符合URL規(guī)則,瀏覽器就會根據URL協議,在這段內容上加上協議合成合法的URL
- 用戶輸入完內容突委,按下回車鍵敌蚜,瀏覽器導航欄顯示loading狀態(tài)齐媒,但是頁面還是呈現前一個頁面,這是因為新頁面的響應數據還沒有獲得
- 瀏覽器進程瀏覽器構建請求行信息,會通過進程間通信(IPC)將URL請求發(fā)送給網絡進程
GET /index.html HTTP1.1 - 網絡進程獲取到URL,先去本地緩存中查找是否有緩存文件腕侄,如果有酸茴,攔截請求魁淳,直接200返回昆稿;否則喳瓣,進入網絡請求過程
- 網絡進程請求DNS返回域名對應的IP和端口號仿滔,如果之前DNS數據緩存服務緩存過當前域名信息腰埂,就會直接返回緩存信息丈挟;否則例朱,發(fā)起請求獲取根據域名解析出來的IP和端口號,如果沒有端口號,http默認80绞灼,https默認443。如果是https請求,還需要建立TLS連接。
- Chrome 有個機制,同一個域名同時最多只能建立 6 個TCP 連接陆馁,如果在同一個域名下同時有 10 個請求發(fā)生彪蓬,那么其中 4 個請求會進入排隊等待狀態(tài),直至進行中的請求完成伞梯。如果當前請求數量少于6個,會直接建立TCP連接。
- TCP三次握手建立連接皱炉,http請求加上TCP頭部——包括源端口號惯退、目的程序端口號和用于校驗數據完整性的序號,向下傳輸
- 網絡層在數據包上加上IP頭部——包括源IP地址和目的IP地址者娱,繼續(xù)向下傳輸到底層
- 底層通過物理網絡傳輸給目的服務器主機
- 目的服務器主機網絡層接收到數據包,解析出IP頭部梅垄,識別出數據部分,將解開的數據包向上傳輸到傳輸層
- 目的服務器主機傳輸層獲取到數據包,解析出TCP頭部践图,識別端口,將解開的數據包向上傳輸到應用層
- 應用層HTTP解析請求頭和請求體,如果需要重定向斩熊,HTTP直接返回HTTP響應數據的狀態(tài)code301或者302,同時在請求頭的Location字段中附上重定向地址尤溜,瀏覽器會根據code和Location進行重定向操作绝葡;如果不是重定向,首先服務器會根據 請求頭中的If-None-Match 的值來判斷請求的資源是否被更新溅呢,如果沒有更新,就返回304狀態(tài)碼铣墨,相當于告訴瀏覽器之前的緩存還可以使用碱妆,就不返回新數據了疹尾;否則繁成,返回新數據尊搬,200的狀態(tài)碼袭祟,并且如果想要瀏覽器緩存數據的話,就在相應頭中加入字段:
Cache-Control:Max-age=2000
響應數據又順著應用層——傳輸層——網絡層——網絡層——傳輸層——應用層的順序返回到網絡進程 - 數據傳輸完成跟继,TCP四次揮手斷開連接种冬。如果,瀏覽器或者服務器在HTTP頭部加上如下信息舔糖,TCP就一直保持連接娱两。保持TCP連接可以省下下次需要建立連接的時間,提示資源加載速度
Connection:Keep-Alive - 網絡進程將獲取到的數據包進行解析金吗,根據響應頭中的Content-type來判斷響應數據的類型十兢,如果是字節(jié)流類型,就將該請求交給下載管理器摇庙,該導航流程結束旱物,不再進行;如果是text/html類型卫袒,就通知瀏覽器進程獲取到文檔準備渲染
- 瀏覽器進程獲取到通知宵呛,根據當前頁面B是否是從頁面A打開的并且和頁面A是否是同一個站點(根域名和協議一樣就被認為是同一個站點),如果滿足上述條件夕凝,就復用之前網頁的進程宝穗,否則封孙,新創(chuàng)建一個單獨的渲染進程
- 瀏覽器會發(fā)出“提交文檔”的消息給渲染進程,渲染進程收到消息后讽营,會和網絡進程建立傳輸數據的“管道”,文檔數據傳輸完成后泡徙,渲染進程會返回“確認提交”的消息給瀏覽器進程
- 瀏覽器收到“確認提交”的消息后橱鹏,會更新瀏覽器的頁面狀態(tài),包括了安全狀態(tài)堪藐、地址欄的 URL莉兰、前進后退的歷史狀態(tài),并更新web頁面礁竞,此時的web頁面是空白頁
- 渲染進程對文檔進行頁面解析和子資源加載糖荒,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頁面。