CSS效率问题

Question

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

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

我开始觉得这取决于浏览器，尤其是考虑这个问题的第二部分（可能的操作系统呢？）：

要达到透明度，是更有效的瓷砖半透明.png文件，或者使用CSS不透明属性（再次提及大块和小块的问题）？根据我的经验，旧版本的IE似乎比使用CSS不透明属性的平铺半透明PNG更好（尽管我从未做过任何科学测试）。

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

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

-Peter

Answer 1

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

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

一般：

• 要避免平铺非常小的图像。一个20像素的图像会比1像素更好，因为浏览器在重新绘制整个屏幕方面做的很少。不过，20px和100px之间的差别可能不大。
• 任何可以用CSS完成的事情都可能比加载其他图像更有效率。 （如圆角，阴影等）
• 一个很大的警告是IE的css过滤器。其中很多效率不高，你可能会更好地恢复图像。

Answer 2

根据我的测试，似乎页面呈现较快用最小的图像成为可能，让CSS做瓷砖本身。这发生的速度完全取决于浏览器。

对于半透明的背景，使用CSS会带宽更轻，但CSS不透明仍然不完全支持，所以我会考虑到这一点时考虑到这一点。

我会很好奇，想了解其他人的测试结果...