1. 程式人生 > >學習筆記:瀏覽器渲染優化——關鍵渲染路徑

學習筆記:瀏覽器渲染優化——關鍵渲染路徑

這裡寫圖片描述
但瀏覽器還需要對每幀進行處理,所以要在10ms內完成所有任務並及時渲染每幀。

渲染樹(render tree)

這裡寫圖片描述
只有實際上會顯示在網頁上的元素,才會進入渲染樹
它和DOM樹很像,只是少了一些東西。
例如沒有了:head 任何指令碼
如果有css段落設定成display:none,那麼段落P也會從渲染樹中移除。
如果添加了偽元素如afterbefore,就會被新增到渲染樹裡(即使沒出現在DOM裡)。
這裡寫圖片描述

從單個請求一直在將畫素填充到螢幕上的簡單流程

瀏覽器創造的多的層面叫做圖層,並且可以單獨繪製這些圖層
這裡寫圖片描述

渲染

瀏覽器將需要檢查所有其他元素

並返回流網頁,受影響區域將重新繪製
1. 通過JS、CSS更改了外觀或者改變了佈局(元素的幾何結構)
2. 僅更改繪製屬性(JS、CSS),沒更改佈局
3. 沒更改繪製或者佈局,只需要合成(合成是指瀏覽器將頁面的單個圖層合併到一起),如下圖:
這裡寫圖片描述