文字陰影（和其他css3）導致滾動滯後

Question

我注意到，我使用某些CSS3元素（即box-shadow和text-shadow）越多頁面上存在更多的滾動滯後。我注意到FF4和Chrome 10都存在這個問題。有沒有什麼好的方法來衡量或減少它？我想要好的表現，但我也希望能夠使用陰影在各種元素之間創建維度。

謝謝！

Answer 1

我發現兩個最大的罪犯（就性能而言）是你的陰影的模糊量，以及你是否使用任何alphas（rgba，hsl等）。

硬件加速是使用任何css3好東西並保持可接受性能的關鍵。 Webkit（不知道FF4）甚至不會使用GPU，除非你特別要求三維操作。你可以通過簡單地將0像素3D轉換在GPU的任何元素踢：

-webkit-transform: translate3d(0,0,0); 
/* OR */ 
-webkit-transform: translateZ(0); 

保羅愛爾蘭對CSS3的性能有一個great talk和使用webkits dev的標誌來調試GPU渲染。這DOM的區域被呈現在GPU和

CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari 

這將顯示您（在半透明的紅色）：

從終端（OS X），你可以用GPU渲染調試標誌與此推出Safari瀏覽器哪些是由CPU like this渲染的。