瀏覽器輸入URL後後的過程

2022-06-29 10:12:13 字數 4035 閱讀 9383

還有一篇寫的很好:

1、輸入url按下回車後,首先檢查url是否在快取中,並比較快取是否過期

2、dns解析url對應的ip

3、根據ip建立tcp連線(三次握手)

4、連線建立後,http就可以傳送請求了

5、伺服器處理請求,瀏覽器接收http響應

6、渲染頁面,構建dom樹

7、關閉tcp連線(四次揮手)

說完整個過程的幾個關鍵點後我們再來展開的說一下。

一、url

我們常見的rul是這樣的:這個網域名稱由三部分組成:協議名、網域名稱、埠號,這裡埠是預設所以隱藏。除此之外url還會包含一些路徑、查詢和其他片段,例如:我們最常見的的協議是http協議,除此之外還有加密的https協議、ftp協議、file協議等等。url的中間部分為網域名稱或者是ip,之後就是埠號了。通常埠號不常見是因為大部分的都是使用預設埠,如http預設埠80,https預設埠443。說到這裡可能有的面試官會問你同源策略,以及更深層次的跨域的問題,我今天就不在這裡展開了。

二、快取

說完url我們說說瀏覽器快取,http快取有多種規則,根據是否需要重新向伺服器發起請求來分類,我將其分為強制快取,對比快取。

強制快取判斷http首部字段:cache-control,expires。

expires是乙個絕對時間,即伺服器時間。瀏覽器檢查當前時間,如果還沒到失效時間就直接使用快取檔案。但是該方法存在乙個問題:伺服器時間與客戶端時間可能不一致。因此該欄位已經很少使用。

cache-control中的max-age儲存乙個相對時間。例如cache-control: max-age = 484200,表示瀏覽器收到檔案後,快取在484200s內均有效。 如果同時存在cache-control和expires,瀏覽器總是優先使用cache-control。

對比快取通過http的last-modified,etag欄位進行判斷。

last-modified是第一次請求資源時,伺服器返回的字段,表示最後一次更新的時間。下一次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地last-modified時間與if-modified-since時間比較,如果不一致則認為快取已過期並返回新資源給瀏覽器;如果時間一致則傳送304狀態碼,讓瀏覽器繼續使用快取。

etag:資源的實體標識(雜湊字串),當資源內容更新時,etag會改變。伺服器會判斷etag是否發生變化,如果變化則返回新資源,否則返回304。

三、dns網域名稱解析

我們知道在位址列輸入的網域名稱並不是最後資源所在的真實位置,網域名稱只是與ip位址的乙個對映。網路伺服器的ip位址那麼多,我們不可能去記一串串的數字,因此網域名稱就產生了,網域名稱解析的過程實際是將網域名稱還原為ip位址的過程。

dns查詢過程一般有以下三個:

2、如果第一步沒找到,則會瀏覽器會系統查詢本地dns解析器快取,如果查詢到則返回。

3、如果還是沒有找到則會查詢本地dns伺服器,如果查詢到則返回。

最後迭代查詢,按根域伺服器 ->頂級域,.cn->第二層域,hb.cn ->子域,www.hb.cn的順序找到ip位址。

四、tcp連線

在通過第一步的dns網域名稱解析後,獲取到了伺服器的ip位址,在獲取到ip位址後,便會開始建立一次連線,這是由tcp協議完成的,主要通過三次握手進行連線。

第一次握手: 建立連線時,客戶端傳送syn包(syn=j)到伺服器,並進入syn_sent狀態,等待伺服器確認; 

第二次握手: 伺服器收到syn包,必須確認客戶的syn(ack=j+1),同時自己也傳送乙個syn包(syn=k),即syn+ack包,此時伺服器進入syn_recv狀態;

第三次握手: 客戶端收到伺服器的syn+ack包,向伺服器傳送確認包ack(ack=k+1),此包傳送完畢,客戶端和伺服器進入established(tcp連線成功)狀態,完成三次握手。

完成三次握手,客戶端與伺服器開始傳送資料。

五、瀏覽器向伺服器傳送http請求

完整的http請求包含請求起始行、請求頭部、請求主體三部分。

六、瀏覽器接收響應

伺服器在收到瀏覽器傳送的http請求之後,會將收到的http報文封裝成http的request物件,並通過不同的web伺服器進行處理,處理完的結果以http的response物件返回,主要包括狀態碼,響應頭,響應報文三個部分。

狀態碼主要包括以下部分

1xx:指示資訊–表示請求已接收,繼續處理。

2xx:成功–表示請求已被成功接收、理解、接受。

3xx:重定向–要完成請求必須進行更進一步的操作。

4xx:客戶端錯誤–請求有語法錯誤或請求無法實現。

5xx:伺服器端錯誤–伺服器未能實現合法的請求。

響應頭主要由cache-control、 connection、date、pragma等組成。

響應體為伺服器返回給瀏覽器的資訊,主要由html,css,js,檔案組成。

七、頁面渲染

如果說響應的內容是html文件的話,就需要瀏覽器進行解析渲染呈現給使用者。整個過程涉及兩個方面:解析和渲染。在渲染頁面之前,需要構建dom樹和cssom樹。

在瀏覽器還沒接收到完整的html檔案時,它就開始渲染頁面了,在遇到外部鏈入的指令碼標籤或樣式標籤或時,會再次傳送http請求重複上述的步驟。在收到css檔案後會對已經渲染的頁面重新渲染,加入它們應有的樣式,檔案載入完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。這裡就涉及了兩個重要概念:reflow和repaint。

reflow,也稱作layout,中文叫回流,一般意味著元素的內容、結構、位置或尺寸發生了變化,需要重新計算樣式和渲染樹,這個過程稱為reflow。

repaint,中文重繪,意味著元素發生的改變只是影響了元素的一些外觀之類的時候(例如,背景色,邊框顏色,文字顏色等),此時只需要應用新樣式繪製這個元素就ok了,這個過程稱為repaint。

所以說reflow的成本比repaint的成本高得多的多。dom樹里的每個結點都會有reflow方法,乙個結點的reflow很有可能導致子結點,甚至父點以及同級結點的reflow。

下面這些動作有很大可能會是成本比較高的:

基本上來說,reflow有如下的幾個原因:

八、關閉tcp連線或繼續保持連線

通過四次揮手關閉連線(fin ack, ack, fin ack, ack)。

第一次揮手是瀏覽器發完資料後,傳送fin請求斷開連線。

第二次揮手是伺服器傳送ack表示同意,如果在這一次伺服器也傳送fin請求斷開連線似乎也沒有不妥,但考慮到伺服器可能還有資料要傳送,所以伺服器傳送fin應該放在第三次揮手中。

這樣瀏覽器需要返回ack表示同意,也就是第四次揮手。

至此從瀏覽器位址列輸入url到頁面呈現到你面前的整個過程就分析完了。

瀏覽器輸入URL回車後

當我們想瀏覽某乙個網頁時,一般都會輸入對應的url,這個其實就是請求對應資源的過程。那麼這個過程實質上經歷了什麼呢?查詢ip 客戶端根據網域名稱查詢對應的ip 相互通訊 客戶端與資源伺服器通訊 斷開連線 客戶端與資源伺服器斷開連線 1.查詢ip 系統將網域名稱傳送至 ldns 本地網域名稱伺服器 查...

瀏覽器輸入url後經歷的過程(詳細)

一般會經歷以下幾個過程 1 首先,在瀏覽器位址列中輸入url 2 瀏覽器先檢視瀏覽器快取 系統快取 路由器快取,如果快取中有,會直接在螢幕中顯示頁面內容。若沒有,則跳到第三步操作。3 在傳送http請求前,需要網域名稱解析 dns解析 解析獲取相應的ip位址。4 瀏覽器向伺服器發起tcp連線,與瀏覽...

瀏覽器輸入url後經歷的過程(詳細)

一般會經歷以下幾個過程 1 首先,在瀏覽器位址列中輸入url 2 瀏覽器先檢視瀏覽器快取 系統快取 路由器快取,如果快取中有,會直接在螢幕中顯示頁面內容。若沒有,則跳到第三步操作。3 在傳送http請求前,需要網域名稱解析 dns解析 解析獲取相應的ip位址。4 瀏覽器向伺服器發起tcp連線,與瀏覽...