CSS 文本阴影性能问题。

Question

我正在开发一个项目，需要一些 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 字体大小）文本元素。

Answer 1

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

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