從輸入乙個URL到頁面渲染的流程簡介

2021-09-13 21:31:48 字數 1528 閱讀 6166

從使用者在瀏覽器中輸入乙個url,到整個頁面渲染,這個過程中究竟發生了什麼呢?今天先簡單寫下整個過程,後面再一點點完善。

為什麼要獲取ip位址?

ip位址對應一台真實的物理機器,而且ip位址就像人的身份證是唯一的,使用者請求伺服器,只需要輸入為該伺服器分配的唯一的ip位址即可。但由於ip位址不便於記憶,因而使用較為語義化的網域名稱來替代ip位址,而且乙個網域名稱可能對應了對個ip位址,比如使用者輸入www.baidu.com,該網域名稱下對應了多個ip,網域名稱解析伺服器會根據一定的規則分配給使用者其中乙個ip位址。
首先會在瀏覽器的快取中查詢,是否快取了url,如果有,就直接向該url對應的伺服器傳送請求;如果沒有則進行下一步;

向本地dns伺服器(一般由本地網路接入伺服器提供商提供,比如移動)傳送dns請求,本地dns伺服器會首先查詢它的快取記錄,如果有就將該網域名稱對應的ip位址返回給使用者,如果沒有則進行下一步;

首先向根網域名稱伺服器傳送dns查詢請求,根網域名稱伺服器返回給可能儲存了該網域名稱的一級網域名稱伺服器位址;本地主機再根據返回的位址,向一級網域名稱伺服器傳送dns查詢請求;...一直迭代,直到找到對應的網域名稱存放的伺服器,向其傳送dns查詢請求,該網域名稱伺服器返回該網域名稱對應的ip位址;

三次握手:

為什麼要進行三次握手?如果是兩次握手,如下面的對話只有前兩句,有可能出現的問題是:客戶端之前傳送了乙個連線請求報文,由於網路原因滯留在網路中,後來到達伺服器端,伺服器接收到該請求,就會建立連線,等待客戶端傳送資料。而此時客戶端壓根就不知道發生了什麼,白白造成了伺服器資源浪費。

注:**於

客戶端:我要請求資料可以嗎?

伺服器:可以的

客戶端:好的

客戶機與伺服器建立連線後就可以通訊了,這裡就暫時先不詳細展開說http請求了。講下客戶端請求靜態資源和動態資源。

動態資源:如果客戶端請求的是動態資源,則web伺服器會呼叫cgi/vm執行程式完成相應的操作,如查詢資料庫,然後返回查詢結果資料集,並將執行的結果--html檔案返回給web伺服器。web伺服器再將html檔案返回給使用者。

瀏覽器拿到html檔案後,根據渲染規則進行渲染:

解析html,構建dom樹

解析css,生成css規則樹

合併dom樹和css規則樹,生成render樹

布局render樹

繪製render數、樹,即繪製頁面畫素資訊

gpu將各層合成,結果呈現在瀏覽器視窗中。

客戶端沒有資料傳送時就需要斷開連線,以釋放伺服器資源。

注:**於

客戶端:我沒有資料要傳送了,打算斷開連線

伺服器:你的請求我收到了,我這還有資料沒有傳送完成,你等下

伺服器:我的資料傳送完畢,可以斷開連線了

客戶端:ok,你斷開連線吧(客戶端獨白:我將在2倍的最大報文段生存時間後關閉連線。如果我再次收到伺服器的訊息,我就知道伺服器沒有收到我的這句話,我就再傳送一遍)。

最終伺服器收到該客戶端傳送的訊息斷開連線,客戶端也關閉連線。

從輸入URL到頁面渲染

url請求過程 瀏覽器收到http響應 reference 前人栽樹,後人乘涼,以下為學習筆記。從輸入url到頁面展示,這中間發生了什麼?這是一道經典面試題,涉及到了網路 作業系統 web 等一系列的知識。當我們在位址列中輸入url並按下回車後,瀏覽器裡發生第一件事是觸發解除安裝事件,即 befor...

從輸入url到頁面渲染出來過程

在瀏覽器輸入url後的訪問 url的組成協議 網域名稱 有時候也是ip,埠號 數字表示,若為http的預設值 80 可省略 路徑 以 字元區別路徑中的每乙個目錄名稱 查詢引數 get模式的窗體引數,以 字元為起點,每個引數以 隔開,再以 分開引數名稱與資料,通常以utf8的url編碼,避開字元衝突的...

從輸入URL到渲染頁面發生了什麼?

網域名稱解析 發起tcp三次握手建立連線 建立連線後發起http請求 伺服器響應請求,瀏覽器獲取html原始碼 瀏覽器渲染頁面 然後先上一張比較直觀的圖 因為 http是不是一種面向連線的協議,在應用層中,僅僅是生成了http請求的資訊和資料,但無法直接傳送,所以才需要先建立tcp連線。tcp在將h...