從輸入URL到顯示發生了什麼

2022-07-07 12:27:15 字數 2343 閱讀 3807

使用者階段

合成 url:使用者輸入 url,瀏覽器會根據使用者輸入的資訊判斷的資訊是搜尋還是**,如果是搜素內容,就將搜尋內容+預設搜尋預設搜尋引擎合成新的 url 如果使用者輸入的內容符合 url 規則,瀏覽器就會根據 url 協議,在這段內容上加上協議合成 url

載入:使用者輸入完內容,按下回車鍵,瀏覽器導航欄顯示 loading 狀態,但是頁面還是呈現前乙個頁面,這是因為新頁面的響應資料還沒有獲得

傳送 url 請求階段

構建請求:瀏覽器程序首先會構建請求行資訊,然後通過程序間通訊(ipc)將 url 請求傳送給網路程序。

查詢快取:網路程序獲取到 url,先去本地快取中查詢是否有快取資源,如果有則攔截請求,直接將快取資源返回給瀏覽器程序;否則,進入網路請求階段。

dns 解析:網路程序請求首先會從 dns 資料快取服務中查詢是否快取過當前網域名稱資訊,有則直接返回;否則,會進行 dns 解析返回網域名稱對應 ip 和埠號,如果沒有指定埠,http 預設 80 埠 http 預設 443。如果是 https 請求,還需要建立 tls 連線

等待 tcp 佇列:chrome 有個機制,同乙個網域名稱同時最多只能建立 6 個 tcp 連線,如果在同乙個網域名稱下同時有 10 個請求發生,那麼其中 4 個請求會進入排隊等待狀態,直至進行中的請求完成。如果當前請求數量少於 6 個,會直接建立 tcp 連線;

建立 tcp 連線 tcp 三次握手與伺服器建立,然後資料的傳輸

傳送 http 請求:瀏覽器首先回向伺服器傳送行,他包含了請求方法,請求 uri 和 http 協議的版本;另外還會傳送請求頭,告訴伺服器一些瀏覽器的相關資訊,比如瀏覽器核心,請求網域名稱,cookie 等如果需要傳遞引數,則還需要傳送請求體

伺服器處理請求:伺服器首先返回響應行,包含協議版本和狀態碼,比如狀態 200 表示繼續處理該請求(如果是 301,則表示重定向,將會在響應頭的 location 欄位中加上重定向的位址資訊,比如伺服器生成返回資料的時間,返回的資料型別(json html 流**等型別),以及伺服器要在客戶端儲存的 cookie 等繼續傳送響應體的資料

斷開 tcp 連線:資料傳輸完成,正常情況下 tcp 將四次握手斷開連線。但是瀏覽器或者伺服器在 http 頭加上 connection:keep-alive,tcp 將會一直保持連線。保持 tcp 連線可以省下下次需要建立連線的時間,提示資源載入速度;

準備渲染程序階段

正常情況下每個瀏覽器的 tab 會對應乙個渲染程序,但如果從乙個頁面開啟了另乙個新頁面,而新頁面和當前頁面資料同乙個站點的話,那麼新頁面會復用父頁面的渲染程序,否則就會建立乙個新的渲染程序。

提交文件階段

渲染程序準備好後,瀏覽器發出」提交文件「的訊息給渲染程序,渲染程序收到訊息後,會和網路程序建立傳輸資料的」管道「,文件資料傳輸完成後,渲染程序會返回」確認訊息「的訊息給瀏覽器程序。

瀏覽器收到」確認訊息「的訊息後,會更新瀏覽器的頁面狀態,包含安全狀態位址 url,前進後退的歷史狀態,並更新 web 頁面,此時 web 頁面是空白頁

頁面渲染階段

文件一旦提交,渲染程序將開始頁面解析和資源載入;渲染階段比較複雜,所以將分為多個子階段,按照渲染的時間順序可以分為構建 dom 樹,樣式計算,布局階段,分層,繪製,分塊,光柵化和合成

構建 dom 樹 html 經過解析輸出乙個 document 為頂層階段的樹形結構 dom

樣式計算:這裡有 3 個步驟

布局階段 dom 樹種依然存在許多不可見的元素(比如 head),這些元素對於布局是絲毫沒用的,所以又會生成一棵只包含可見元素布局樹,然後在根據布局樹的每個節點計算出其具體位置和尺寸大小

分層頁面中有很多複雜的效果,比如一些複雜的 3d 變換,頁面滾動,或者使用 z-index 做 z 軸排序等,為了更加方便的實現這些效果,渲染引擎還需要為特定的節點生成專用的圖層並生成一棵對應的圖層樹

繪製:為每個圖層生成繪製列表,並將其提交到合成執行緒

光柵化:通常乙個頁面很大視口很侷限,所以合成執行緒會按照視口附近的土塊來優先生成位圖,並在光柵化執行緒將圖塊轉為位圖

合成:一旦所有圖塊都被光柵化,合成執行緒就會生成乙個繪製圖塊的命令 drawquad,然後將該命令提交給瀏覽器程序,之後瀏覽器將開始生成顯示頁面。

部分內容摘自

從輸入URL到頁面顯示,都發生了什麼?

瀏覽器將使用者在位址列中輸入的url封裝成請求報文 瀏覽器發起dns解析,將網域名稱轉換為ip位址 remote address 14.215.177.38 443 瀏覽器將請求報文傳送給伺服器 伺服器接收請求報文並解析,解析完畢知道使用者要請求什麼資料 伺服器對使用者需要請求的資料進行處理,處理完...

從url到頁面顯示發生了什麼

資源路徑 question 554991 2 如果位址不是乙個ip位址,通過dns 網域名稱系統 將該位址解析成ip位址。ip位址對應著網路上一台計算機,dns伺服器本身也有ip,你的網路設定包含dns伺服器的ip。例如 www.guokr.com 不是乙個ip,向dns詢問請求www.guokr....

從輸入URL到頁面載入,發生了什麼

整理之前的筆記時,發現之前的掌握的東西尚差的太遠,就仔細查詢了這個問題。總體來說,可以分為一下幾個部分 1.dns解析 2.tcp連線 3.傳送http請求 4.伺服器處理請求並返回http報文 5.瀏覽器解析渲染頁面 6.連線結束 dns解析是將網域名稱轉換成ip的過程,從使用者在瀏覽器位址列輸入...