我注意到我越多地使用某些 CSS3 元素（即box-shadow and text-shadow）页面上存在的滚动滞后越多。我注意到 FF4 和 Chrome 10 上都有这个问题。有什么好的方法来衡量或减少这个问题吗？我想要良好的性能，但我也希望能够使用阴影在各种元素之间创建维度。
Thanks!
我发现两个最大的问题（就性能而言）是阴影的模糊量以及是否使用任何 alpha（rgba、hsl 等）。
硬件加速是使用任何 css3 优点并保持可接受的性能的关键。 Webkit（不确定FF4）甚至不会使用GPU，除非您特别要求进行三维操作。您只需应用 0 像素 3d 变换即可为任何元素启动 GPU：
-webkit-transform: translate3d(0,0,0);
/* OR */
-webkit-transform: translateZ(0);
保罗·爱尔兰有一个很棒的谈话 http://www.youtube.com/watch?v=q_O9_C2ZjoA关于 css3 性能并使用 webkits 开发标志来调试 GPU 渲染。
从终端 (OS X)，您可以使用 GPU 渲染调试标志启动 Safari：
CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
这将向您显示（半透明的红色）哪些 DOM 区域正在 GPU 上渲染，哪些由 CPU 渲染像这样 https://i.stack.imgur.com/79ZRg.png.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
