CSS背景性能

我正在寻找优化我正在建设的网站的性能，所以我正在寻找特定问题的最佳方法。CSS背景性能

我有25 <div>的，每个都有独立的背景图片。每个<div>有：

position: fixed; 
width: 100%; 
height: 100%;

这使得图像堆叠在一起。

某些图像比较大。超过500x500。在文件大小方面，每个大约为25kb。

我遇到的问题是，当我打开铬开发工具来检查帧速率时，我得到的帧大概需要50ms，其中主要包括重新绘制。

50ms是一个很高的数字。最好是16ms或更少。我正在寻找这个动画，但我已经在这里了解了我的'预算'。

为什么我的重漆会如此之高有什么特别的原因吗？有什么办法来减轻这与多个CSS背景或我必须找到另一种解决方案？

我还没有看到以这种方式重新绘制图像的官方研究，但我建议a）首先优化图像本身，b）确保它们在可能时通过css隐藏 – helion3

如果网页是图像沉重，通常会隐藏所有图像，并在所有图像下载后执行动画。 – Sho

@ helion3感谢您的回应。具体来说，我使用的是SVGZ（这是SVG的压缩）。他们已经很好地优化了。 – user3277810

终于想通了。

SVG固有地比其他图像格式有更慢的着色时间。切换到PNG后，帧率现在是平均10ms，而不是50ms。

不确定这背后的原因。

2014-02-14 00:25:02 user3277810

有喜欢的方式：

2014-02-13 05:21:26

此答案不适用于该问题。第一个答案可能在某种程度上起作用，但在这种情况下它不是一种选择。合并图像并缓存它们是为了加快网站的加载速度，并且对帧速率的影响最小或没有影响。 – user3277810

回答