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性能上有great talk，并使用webkits dev标志来调试GPU渲染。

从终端（OS X），您可以使用GPU渲染调试标志启动Safari：

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

这将显示（半透明红色）哪些DOM区域在GPU上呈现以及哪些DOM区域由CPU like this呈现。