文字阴影（和其他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渲染的。