CSS 文本阴影性能问题。答案

【问题标题】：CSS Text-shadow performance issues.CSS 文本阴影性能问题。
【发布时间】：2011-10-16 13:05:14
【问题描述】：

我正在开发一个需要几个 h1 标签才能应用文本阴影的项目。这会导致一些实际的性能问题，FPS 低于 5 :(

我的文字在页面顶部第一次出现时变得模糊，然后它越靠近窗口中间，它成为焦点，当用户继续向上滚动时再次模糊。

这个项目只需要在 Chrome (v12) 中工作，我很想知道我们是否有任何解决这个问题的方法，或者是模糊文本的替代方法，但性能影响较小？

干杯。

更新：这是我最初应用的 CSS：

color: transparent;   
text-shadow: 0px 0px 1px #FFFFFF;

然后我使用 Javascript 来操作它：

$(e.id).css('text-shadow', "0px 0px " + blurAmount + "px #FFFFFF");

这适用于几个大（86px 字体大小）文本元素。

【问题讨论】：

刚刚更新了原来的问题。
可能只是移动（滚动）和模糊文本的组合对 chrome 的渲染引擎造成了压力。如果您想找出答案，请尝试使用与滚动分离的间隔来模糊文本，看看性能是否与现在相同，或者实际上是否更好。

【解决方案1】：

就浏览器渲染而言，动态 CSS3 文本阴影已经对 CPU 造成了相当大的压力，并且添加 JavaScript 会导致窗口在每个可能的滚动帧上同时更新该值，从而导致浏览器重新使用不同的设置渲染会导致这种情况。

据我所知，如果您需要这种确切的效果来工作，没有解决办法，因为效果的两个部分都需要大量的客户端计算。

【讨论】：