瀏覽器 重定向次數限制 深入淺出瀏覽器渲染原理

2021-10-14 06:36:17 字數 2833 閱讀 8480

這塊的文章網上也是比較多的,但大多數都是講解dom樹的渲染,對於頁面從請求到展示的詳細流程講解還是比較少的,而且有些說的也不容易理解,下面我將以**結合的形式給大夥講講。

作用

dns 的作用就是通過網域名稱查詢到具體的 ip。

背景

因為 ip 存在數字和英文的組合(ipv6),很不利於人類記憶,所以就出現了網域名稱。你可以把網域名稱看成是某個 ip 的別名,dns 就是去查詢這個別名的真正名稱是什麼。

過程

在 tcp 握手之前就已經進行了 dns 查詢,這個查詢是作業系統自己做的。當你在瀏覽器中想訪問 www.test.com 時,會進行一下操作:

作業系統會首先在本地快取中查詢 ip

沒有的話會去系統配置的 dns 伺服器中查詢

如果這時候還沒得話,會直接去 dns 根伺服器查詢,這一步查詢會找出負責 com 這個一級網域名稱的伺服器

然後去該伺服器查詢 baidu 這個二級網域名稱

接下來**網域名稱的查詢其實是我們配置的,你可以給 www 這個網域名稱配置乙個 ip,然後還可以給別的**網域名稱配置乙個 ip

以上介紹的是 dns 迭代查詢,還有種是遞迴查詢,區別就是前者是由客戶端去做請求,後者是由系統配置的 dns 伺服器做請求,得到結果後將資料返回給客戶端。

在進行完dns解析之後,接下來就是 tcp 握手,應用層會下發資料給傳輸層,這裡 tcp 協議會指明兩端的埠號,然後下發給網路層。網路層中的 ip 協議會確定 ip 位址,並且指示了資料傳輸中如何跳轉路由器。然後包會再被封裝到資料鏈路層的資料幀結構中,最後就是物理層面的傳輸了。

tcp建立連線的三次握手

首先假設主動發起請求的一端稱為客戶端,被動連線的一端稱為服務端。不管是客戶端還是服務端,tcp 連線建立完後都能傳送和接收資料,所以 tcp 是乙個全雙工的協議。

起初,兩端都為 closed 狀態。在通訊開始前,雙方都會建立 tcb。 伺服器建立完 tcb 後便進入 listen 狀態,此時開始等待客戶端傳送資料。

第一次握手

客戶端向服務端傳送連線請求報文段。該報文段中包含自身的資料通訊初始序號。請求傳送後,客戶端便進入 syn-sent 狀態。

第二次握手

服務端收到連線請求報文段後,如果同意連線,則會傳送乙個應答,該應答中也會包含自身的資料通訊初始序號,傳送完成後便進入 syn-received 狀態。

第三次握手

當客戶端收到連線同意的應答後,還要向服務端傳送乙個確認報文。客戶端發完這個報文段後便進入 established 狀態,服務端收到這個應答後也進入 established 狀態,此時連線建立成功。

第三次握手中可以包含資料,通過快速開啟(tfo)技術就可以實現這一功能。其實只要涉及到握手的協議,都可以使用類似 tfo 的方式,客戶端和服務端儲存相同的 cookie,下次握手時發出 cookie 達到減少 rtt 的目的。

tls 協議位於傳輸層之上,應用層之下,主要是對http請求進行加密。首次進行 tls 協議傳輸需要兩個 rtt ,接下來可以通過 session resumption 減少到乙個 rtt。

tls 握手過程如下圖:

客戶端傳送乙個隨機值以及需要的協議和加密方式。

服務端收到客戶端的隨機值,自己也產生乙個隨機值,並根據客戶端需求的協議和加密方式來使用對應的方式,並且傳送自己的證書(如果需要驗證客戶端證書需要說明)

客戶端收到服務端的證書並驗證是否有效,驗證通過會再生成乙個隨機值,通過服務端證書的公鑰去加密這個隨機值並傳送給服務端,如果服務端需要驗證客戶端證書的話會附帶證書

服務端收到加密過的隨機值並使用私鑰解密獲得第三個隨機值,這時候兩端都擁有了三個隨機值,可以通過這三個隨機值按照之前約定的加密方式生成金鑰,接下來的通訊就可以通過該金鑰來加密解密

通過以上步驟可知,在 tls 握手階段,兩端使用非對稱加密的方式來通訊,但是因為非對稱加密損耗的效能比對稱加密大,所以在正式傳輸資料時,兩端使用對稱加密的方式通訊。

資料在進入服務端之前,可能還會先經過負責負載均衡的伺服器,它的作用就是將請求合理的分發到多台伺服器上,這時假設服務端會響應乙個 html 檔案。

首先瀏覽器會判斷狀態碼是什麼,如果是 200 那就繼續解析,如果 400 或 500 的話就會報錯,如果 300 的話會進行重定向,這裡會有個重定向計數器,避免過多次的重定向,超過次數也會報錯。

瀏覽器解析

瀏覽器開始解析檔案,如果是 gzip 格式的話會先解壓一下,然後通過檔案的編碼格式去解碼檔案。

cssom 樹和 dom 樹構建完成後會開始生成 render 樹,這一步就是確定頁面元素的布局、樣式等等諸多方面的東西

在生成 render 樹的過程中,瀏覽器就開始呼叫 gpu 繪製,合成圖層,將內容顯示在螢幕上了。

總的來說,今天這篇文章主要是帶著大家從 dns 查詢開始到渲染出畫面完整的了解一遍過程,裡面涉及到dns、http、tls、負載均衡和瀏覽器渲染等等內容,算不上非常詳細,但如果面試的時候能說出來這些,相信面試官也會對你刮目相看的。

瀏覽器重定向(302)次數限制問題

問題 今天收到反饋說退出在ie8下,出現問題,無法正常完成退出和跳轉。接著對造成該問題的原因進行了排查,發現退出的介面使用了跳轉的方式遍歷了一遍白名單網域名稱,來進行退出所有的域。在網上搜尋了一下這樣做會有什麼問題,了解到不同的瀏覽器對重定向的次數也不相同,當重定向次數超過瀏覽器的限制的時候,頁面會...

瀏覽器重定向(302)次數限制問題

問題 今天收到反饋說退出在ie8下,出現問題,無法正常完成退出和跳轉。接著對造成該問題的原因進行了排查,發現退出的介面使用了跳轉的方式遍歷了一遍白名單網域名稱,來進行退出所有的域。在網上搜尋了一下這樣做會有什麼問題,了解到不同的瀏覽器對重定向的次數也不相同,當重定向次數超過瀏覽器的限制的時候,頁面會...

瀏覽器重定向(302)次數限制問題

問題 今天收到反饋說退出在ie8下,出現問題,無法正常完成退出和跳轉。接著對造成該問題的原因進行了排查,發現退出的介面使用了跳轉的方式遍歷了一遍白名單網域名稱,來進行退出所有的域。在網上搜尋了一下這樣做會有什麼問題,了解到不同的瀏覽器對重定向的次數也不相同,當重定向次數超過瀏覽器的限制的時候,頁面會...