CSS效率问题

Question

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

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

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

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

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

这真的是一个比CSS更广泛的问题,但这只是我最近一直在思考的问题.

-Peter

Answer 1

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

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

一般来说：

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