css - css sprite Img 加载时间哪个更快？

Question

最近我一直在将我的网站切换到 css sprites 以提高性能。我曾经有五个 16 x 16px imgs 的 dll，我现在有一个 220x140px 的 css sprite，由这 5 个图像和文本组成。加载这个更大的图像真的更快吗？

Answer 1

答案是“视情况而定”

如果您从精灵图像加载一张图像，它会更慢，因为文件较大。

但是如果你开始第二次请求第二张图片，精灵会变得更快。

Answer 2

我相信真实的精灵永远是最好的解决方案。我只是不明白您如何从 5x 16 x 16 像素变为 220 x 140 像素的单个文件。如果您使用最小的空间，您应该能够使用 16 像素 x 80 像素的单个图像来完成。尺寸确实很重要。将文本放入图像中并不是一个好主意。在您的 html 中将文本作为纯文本发送要快得多，而且它可以提高使用屏幕阅读器的人的可读性，并且对于 SEO 来说要好得多。如果它使用一些我无法用 css 重现的特殊字体或样式，我只会将文本放入图像中。

Answer 3

老实说，这取决于您必须加载多少次。数量较少时速度较慢，但​​数量较大时速度会更快。

Answer 4

当精灵被精心构建（不浪费大量空间）并在网站的任何地方使用时，是的！特别是在请求之间的延迟和时间可能非常大的移动设备上。