text-shadow(和其他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);

Paul Irish 在css3性能和使用webkits dev标志调试GPU渲染方面进行了很好的讨论.

从终端(OS X),你可以使用GPU渲染调试标志启动Safari:

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

这将显示(半透明红色)哪些DOM区域在GPU上呈现以及哪些由CPU呈现如此.