CSS效率问题

对于这个问题，让“效率”或多或少地表示页面呈现速度。尽管如此，我们也应该考虑性能问题，比如平滑滚动

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

我开始认为这取决于浏览器（可能还有操作系统？），特别是考虑到问题的第二部分：

要实现半透明，平铺半透明.png文件或使用CSS不透明度属性（同样，出现了大平铺与小平铺的问题）更有效吗？根据我的经验，IE的旧版本在使用平铺半透明的.png时比使用CSS不透明属性时表现得更好（尽管我从未做过任何科学测试）

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

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

---

-Peter

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

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

---

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

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

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

一般而言：

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

  ---

这也是一个问题，你是为未来发展还是为过去发展。这是绝对的。我的问题相当开放（也许有点修辞），但我认为讨论是值得的。你能提供一些数字吗？我只是好奇速度差到底有多大。