动画CSS精灵中包含的小图像是否像为该图像制作动画一样高效？

Question

我即将通过我的CSS并将图像编译成精灵，我想知道什么是最有效的方法。目前，我有一堆微小的，需要动画的~10x10像素的图片。我想知道是否将这些图像添加到尺寸更大（~1000x1000px）的精灵中，然后设置它们的动画将导致CPU负载/性能的任何差异。这是动画小div或动画巨型div之间的区别，只有一小部分（指定的背景位置）可见。

Answer 1

最好为精灵设置动画。

1个服务器请求所有图像，一旦它被缓存，没问题。

我要注意的是你打算放入的动画效果，因为做很多事情会导致运行缓慢（特别是css3 3d变换）。

您是否考虑过将canvas用于动画而不是容器div？

Answer 2

动画GIF的处理级别低于JavaScript，即使您只是交换类名。动画GIF不会受到垃圾收集延迟的影响，并且开销也会减少。

在精灵上使用动画GIF。无论如何，文件大小不会有太大差异。