瀏覽器渲染過程

2021-08-21 17:42:35 字數 2103 閱讀 3269

1.頁面準備

2.重定向:在header定義了重定向才會有這個過程,如果沒有就不會產生這個過程

關於重定向的分析

4.dns解析:把網域名稱解析成ip,如果直接用ip位址訪問,不會產生這個過程

5.tcp連線

6.request header:請求頭資訊

7.request body:請求體資訊,比如get請求時沒有請求體資訊的,所有沒有這個過程,這就是為什麼把頭跟體分開寫的原因

8.response header:響應頭資訊

9.response body:響應體資訊

10.處理 html 標記並構建 dom 樹。

1)對於html瀏覽器有專門的html解析器來解析html,並在解析的過程中構建dom樹,對於樣式(link,style)與指令碼檔案(script),瀏覽器採用自上而下的方法解析,在遇到這兩種元素時會阻塞瀏覽器的解析,直到外部資源載入並解析或者執行完畢後才繼續向下解析html,對於樣式與指令碼的先後順序同樣會影響到瀏覽器的解析過程。

解析html結構->載入外部指令碼和樣式表檔案->解析並執行指令碼**->構建與解析html dom樹->載入外部->頁面載入完成,顯示出來

2)外部樣式不會阻塞後續外部指令碼的載入,但會阻塞外部指令碼的執行,對於動態建立的link標籤不會阻塞其後動態建立的script的載入與執行

3)瀏覽器在渲染乙個頁面時,會將頁面分為很多圖層,圖層有大有小,每個圖層上有乙個或多個節點

渲染dom的時候瀏覽器做的工作:

獲取dom後分割為多個圖層,對每個圖層的節點計算樣式結果,為每個節點生成圖形和位置,將每個節點繪製填充到圖層點陣圖中,圖層作為紋理上傳至gpu(圖形處理器),符合多個圖層到頁面上生成最終螢幕影象

注意:如果圖層中某個元素需要重繪,那麼整個圖層都需要重繪,比如乙個圖層包含很多節點,其中有gif圖,gif圖的每一幀都會重回整個圖層的其他節點,然後生成最終的圖層位圖,所以需要強制gif圖屬於自己乙個圖層(translatez(0))

4)建立圖層的情況:

(1)3d或透視變換(perspective transform)

(2)節點

(3)節點

(4)混合外掛程式(如flash)

11.處理 css 標記並構建 cssom 樹。

12.將 dom 與 cssom 合併成乙個渲染樹。

將css樣式應用到dom節點上,webkit核心將這一過程稱為附著dom樹節點不一定有與之對應的渲染樹的節點(比如:display:none),渲染樹節點在渲染樹中的位置與他們在dom樹中的位置不一定相同(比如:float與絕對定位的元素)

13.根據渲染樹來布局,以計算每個節點的幾何資訊。

上一步可以理解為只是把包含大小的樣式資訊存在記憶體中,並沒有實際應用使用瀏覽器要根據視窗的實際大小來處理渲染樹節點的實際顯示大小和位置比如對margin為auto的處理

14.將各個節點繪製到螢幕上。

對於每乙個渲染樹節點來說,主要繪製順序為:

背景顏色->背景->邊框->子渲染樹節點->輪廓

瀏覽器渲染過程

瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹,不...

瀏覽器渲染過程

這個過程可以大致分為兩個部分 網路通訊和頁面渲染。輸入url按下回車之後,瀏覽器會去瀏覽器快取中尋找該url的ip 沒有的話去系統快取中找,還是沒有的話去路由器快取中尋找 再沒有就去系統host檔案中找,還是沒有最後只能去請求dns伺服器,然後dns給乙個ip給瀏覽器 瀏覽器根據這個ip位址,向伺服...

瀏覽器渲染過程

瀏覽器通過瀏覽器核心對html檔案進行解析來生成網頁,通過學習其渲染過程可以理解html檔案時如何呈現為網頁的,怎樣優化它。瀏覽器向伺服器發出請求,伺服器返回html檔案 瀏覽器開始載入html 發現標籤內有乙個標籤引用外部css檔案 瀏覽器又發出css檔案的請求,伺服器返回這個css檔案 瀏覽器繼...