CSS效率问题

Question

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

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

我开始认为这取决于浏览器（也许还有操作系统？），特别是在这个问题的第二部分：

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

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

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

-Peter

Answer 1

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

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

一般来说：

• 你想避免平铺非常小的图像。由于浏览器重绘整个屏幕所做的工作少得多，因此20px图像的平铺效果优于1px。但是，在20px和100px之间可能差别不大。
• 使用CSS可以完成的任何事情都可能比加载其他图像更有效。 （例如圆角，阴影等）
• 一个重要的警告是IE的css过滤器。其中很多都没有效率，你可能最好还原到图像。

Answer 2

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

至于半透明背景，使用CSS会带宽更轻，但CSS不透明度仍然不完全支持，因此在处理类似的事情时我会考虑到这一点。

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