文本阴影（和其他css3）导致滚动滞后 [英] text-shadow (and other css3) causes scroll lag

问题描述

我注意到我越来越多地使用某些CSS3元素（即<$​​ c $ c> box-shadow 和 text-shadow ）在页面上存在更大的滚动滞后。我注意到FF4和Chrome 10都存在问题。是否有任何好的方法来衡量或降低它？我想要良好的性能，但我也希望能够使用阴影在各个元素之间创建维度。

I've noticed that the more I use certain CSS3 elements (namely box-shadow and text-shadow) the more scroll lag exists on a page. I notice the problem on both FF4 and Chrome 10. Is there any good way to measure this or reduce it? I want good performance, but I also want to be able to use the shadows to create dimensionality between the various elements.

谢谢！

推荐答案

我发现（就性能而言）最大的两个违法是阴影的模糊程度以及是否使用任何Alpha（rgba，hsl等）。

I've found the two biggest offenders (as far as performance goes) are the blur amount of your shadows and whether you're using any alphas (rgba, hsl, etc).

硬件加速是使用任何css3好东西并保持可接受的性能的关键。除非您明确要求进行三维操作，否则Webkit（不确定FF4）甚至不会使用GPU。您可以通过简单地应用0像素3d变换来插入任何元素的GPU：

Hardware acceleration is key to using any of the css3 goodies and maintaining acceptable performance. Webkit (not sure about FF4) won't even use the GPU unless you specifically ask for a three-dimensional operation. You can kick in the GPU for any element by simply applying a 0-pixel 3d transform:

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

Paul Irish有关于CSS3性能的好话，并使用webkits开发标志调试GPU渲染。

Paul Irish has a great talk on css3 performance and using webkits dev flags to debug GPU rendering.

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

From terminal (OS X), you can launch Safari with the GPU rendering debug flag with this:

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

这将以半透明的红色显示在GPU上渲染了哪些DOM区域以及哪些由CPU 如此呈现。

This will show you (in translucent red) which DOM regions are being rendered on the GPU and which ones are rendered by the CPU like this.

这篇关于文本阴影（和其他css3）导致滚动滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！