CSS效率问题[关闭]答案

【问题标题】：CSS Efficiency Questions [closed]CSS效率问题[关闭]
【发布时间】：2011-06-07 00:22:58
【问题描述】：

为了这个问题，让“效率”或多或少意味着页面渲染速度。不过，我们还应该考虑性能问题，例如平滑滚动。

假设您在页面上放置了条纹背景。从效率的角度来看，平铺 100px 宽的图像（显示 10 个条纹）还是 20px 宽的图像（显示两个条纹）更好？当然......大图像需要更多时间来加载，但我觉得我在平铺非常小的图像时遇到了麻烦。有最优点吗？

我开始认为这取决于浏览器（也许还取决于操作系统？），尤其是考虑到这个问题的第二部分：

要实现半透明，平铺半透明 .png 文件更有效，还是使用 CSS 不透明度属性（再次出现大平铺与小平铺的问题）？根据我的经验，旧版本的 IE 使用平铺的半透明 .png 似乎比使用 CSS 不透明度属性更好（尽管我从未做过任何科学测试）。

圆角是另一个很好的例子...在某些浏览器中，使用图像而不是 CSS 属性或 JavaScript 实现似乎可以使页面更快，滚动更流畅。

这确实是一个比 CSS 更广泛的问题，但这只是我最近一直在思考的问题。

-彼得

【问题讨论】：

【解决方案1】：

是的，这一切都以操作系统和浏览器为中心。

例如，在 Safari 中，使用 CSS 转换来动画元素比 JS 更有效。

一般：

您希望避免平铺非常小的图像。 20px 的图像比 1px 的图像平铺效果更好，因为浏览器在重新绘制整个屏幕时所做的工作要少得多。不过，20px 和 100px 之间可能没有太大区别。
任何可以用 CSS 完成的事情都可能比加载另一个图像更有效。（如圆角、阴影等）
一个很大的警告是 IE 的 css 过滤器。其中很多效率不高，您最好恢复为图像。

【讨论】：

【解决方案2】：

根据我的测试，页面似乎使用尽可能小的图像渲染得更快，并让 CSS 自己进行平铺。发生这种情况的速度完全取决于浏览器。

至于半透明背景，使用 CSS 会减少带宽，但仍不完全支持 CSS 不透明度，因此在处理此类问题时我会考虑到这一点。

我很想知道其他人的测试结果是什么...

【讨论】：