問題:日常工作中,哪些css屬性可以觸發GPU的硬件加速?
解答:
-
transform
-
opacity
-
filter
硬件加速的工作原理 :
瀏覽器接收到頁面文檔後,會將文檔中的標記語言解析爲DOM樹。DOM樹和CSS結合後形成瀏覽器構建頁面的渲染樹。渲染樹中包含了大量的渲染元素,每一個渲染元素會被分到一個圖層中,每個圖層又會被加載到GPU形成渲染紋理,而圖層在GPU中 transform
是不會觸發 repaint 的,這一點非常類似3D繪圖功能,最終這些使用 transform
的圖層都會由獨立的合成器進程進行處理。