CSS渐变功能似乎使用了太多的cpu功率我做错了什么吗？答案

【问题标题】：CSS gradient feature seems like using too much cpu power am i doing anything wrong?CSS渐变功能似乎使用了太多的cpu功率我做错了什么吗？
【发布时间】：2011-08-21 21:27:38
【问题描述】：

好吧，现在我正在尝试使用 Firefox、opera、chrome 支持的 CSS 渐变功能制作一个看起来很酷的表格。

它看起来很棒，但它滞后太多了。当我向下滚动页面时，它会大大滞后。即使在超快的计算机上也很慢，因此它与计算机无关。我还尝试了不同的浏览器仍然滞后。当我禁用渐变背景颜色功能时，它会返回正常。

那么我该如何解决这个问题，或者有没有其他方法可以制作看起来很酷的桌子。谢谢。

这就是表格的样子http://img202.imageshack.us/img202/4905/howlook.png

这是我用于表 tds 的示例类

 .ML0
    {
                  color: #000000;
        text-decoration: none;
        background: rgb(229,229,229);
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(229,229,229)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(255,255,255)) );
        background: -moz-linear-gradient( center bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        background: -o-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        background: -ms-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); 
    }

【问题讨论】：

您可以使用半透明的 1px 宽的白色渐变图像；这不是最佳做法，但需要更少的渲染时间。
你能详细解释一下吗？我没明白。
对不起，混乱怪物。 @BoltClock 有你的答案:-)

标签： html css background gradient

【解决方案1】：

这是浏览器供应商应该解决的问题，而不是您。您正常使用 CSS3 渐变。

我建议您改为向各自的供应商提交错误报告。如果您需要良好的滚动性能，请暂时放弃替代方案。背景图像对此非常有用；你不需要用 CSS 做所有事情。

【讨论】：

是的，我也在考虑这个问题。但我觉得这不合逻辑。为什么会滞后太多？我的意思是什么导致过多的cpu功耗。当我向下滚动时，我看到它使用 1 个 cpu 100%，而我的 cpu 速度是 4.8 ghz core i7 2600k。太奇怪了。实际上主要问题是我无法绘制图像。但我正在考虑将其设计为渐变并截取屏幕截图并提取 td bgs 并使用它们。我不知道。所以没有什么办法可以让它跑得更快？
@MonsterMMORPG：我真的不这么认为。大多数渲染性能问题是浏览器错误和您无能为力的事情。
我的网站上的画廊也有类似的问题；最后，我只是放弃了，离开了 Chrome（最快的渲染器），效果很好（盒子阴影）。那些浏览器供应商确实需要整理他们的行为，因为 CSS3 正在变得相当主流。让我们忽略 IE
是的，我忽略了 9。chrome 和 firefox 是目前最好的。
我可以这样吗？我制作了一个 CSS 精灵并将其用作背景位置并重复？ css sprite 图像可以在重复填充时用作背景图像吗？这种方式会更明智吗？