6

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

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

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

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

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

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

-彼得

4

2 回答 2

2

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

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

一般来说：

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

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

至于半透明背景，使用 CSS 在带宽上会更轻，但 CSS 不透明度仍然不完全支持，所以在处理类似问题时我会考虑到这一点。

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

于 2011-06-06T16:19:08.553 回答