從URL到頁面渲染,到底經歷了些啥

2021-10-10 03:22:33 字數 2329 閱讀 8460

命中 -> 使用快取,返回200

檢查瀏覽器自身快取是否有該網域名稱對應的ip

檢查本地host檔案**對映

檢查tcp/ip引數中設定的首選伺服器(本地dns伺服器ldns),是否在本地配置區域資源中

到根網域名稱伺服器進行解析,根網域名稱伺服器返回所查域的主網域名稱伺服器gtld位址(.com,.cn,……)

**伺服器找到目標ip返回給本地dns伺服器

本地dns伺服器快取該網域名稱和位址並返回結果給瀏覽器

三次握手:為了確認服務端和客戶端的接收能力和傳送能力是否正常

tcp頭部資訊:

具體參考三次握手、

client -->> server:client_hello,版本號、隨機數(用於金鑰生成)、支援的加密演算法

client <

client <

client <

client:客戶端驗證證書的合法性

client -->> server:client_key_exchange,客戶端計算產生隨機數pre-master,用證書公鑰加密傳送給伺服器(此時客戶端已拿到所有金鑰資訊)

client -->> server:change_cipher_spec,客戶端通知伺服器後續的通訊都採用協商的通訊金鑰和加密演算法進行加密通訊

client -->> server:encrypted_handshake_message,之前的通訊引數的hash值加密後傳送給服務端用於握手驗證

client <

但是也不是每次傳送請求都要經歷上述的所有過程,可以通過乙個session identifier(會話識別符號),該session id是 tls 握手中生成的 session id。服務端可以將 session id 協商後的資訊存起來,瀏覽器也可以儲存 session id,並在後續的 client hello 握手中帶上它,如果服務端能找到與之匹配的資訊,就可以完成一次快速握手。

包括:請求行:請求方法(get,post),請求uri,http協議版本

請求頭:host、connection、cookie、expires、cache-control、if-modified-since、if-none-match、user-agent

請求體:例如post提交的表單

包括:響應行:http協議版本,狀態碼,狀態描述

響應頭:connection、set-cookie、cache-control、date、etag、last-modified

響應體:資料

如果connection為keep-alive,則tcp保持連線,不進行揮手

content-type值為text/html時進行瀏覽器渲染

1、生成標記

2、通過堆疊入棧出棧建樹:

-->> htmlhtmlelement

-->> htmlheadelement

-->> htmlbodyelement

並有一定的容錯策略

格式化樣式:將css文字轉換為結構化的物件 —— document.stylesheets

標準化樣式:while -> #000、bold -> 600

計算每個節點的樣式:繼承(使用父節點的樣式) + 層疊(bfs,gfs……)

計算後的樣式會時刻掛載到window.getcomputedstyle上

1、遍歷dom樹的節點,並將其新增到布局樹中

2、計算布局樹中的節點座標位置

注意:head標籤會預設display: none,chrome會使用skia渲染

1、建立圖層樹

一般來說,當前節點圖層會預設屬於父節點的圖層

2、生成繪製列表

將圖層繪製拆分成乙個個繪製指令,比如先畫背景、再描繪邊框......然後將這些指令按順序組合成乙個待繪製列表,相當於給後面的繪製操作做了一波計畫

3、生成圖塊並柵格化

4、顯示內容

瀏覽器繪製程序 - -》 顯示卡 --》顯示器重新整理展示

觸發重排:樓上的過程會重來一遍

dom大小改變:border、width、height、padding、margin

dom節點數量改變或者位置移動

讀取offset、scroll、client屬性族

呼叫getcomputedstyle、getclientrects

觸發重繪:

dom自身幾何屬性不變,不需要更新位置資訊,從而省掉了布局的過程

參考: 

從輸入URL到頁面渲染

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

從輸入url到頁面展示經歷了哪些過程

使用者輸入url,瀏覽器會根據使用者輸入的資訊判斷是搜尋還是 如果是搜尋內容,就將搜尋內容 預設搜尋引擎合成新的url 如果使用者輸入的內容符合url規則,瀏覽器就會根據url協議,在這段內容上加上協議合成合法的url 使用者輸入完內容,按下回車鍵,瀏覽器導航欄顯示loading狀態,但是頁面還是呈...

從從輸入URL到頁面載入經歷了什麼 更新中

accept 可以處理的檔案型別 user agent 瀏覽器版本和作業系統 accept encoding 可以處理的壓縮,編碼格式 gizp host 主機 cache control connection keep alive長連線 cookie post請求時 referer 訪問的 跟蹤來...