精灵与单个图像

Posted 2023-03-25

【中文标题】精灵与单个图像

【英文标题】：sprite vs individual images

【发布时间】：2011-08-19 01:35:03

【问题描述】：

好的 - 对于一个反复加载的网站来说，这是一个显而易见的问题。一个 sprite 表（可能会缓存在用户系统上）和一些花哨的 css 背景位置技巧，你为自己节省了大量的服务器请求。

但是对于一个网页应用来说，它只会加载一次，再也不会加载。是一个精灵真的要走的路。是的，将其分解为单独的 png 意味着需要更多的请求，但从长远来看，这如何公平？

我猜这完全取决于渲染引擎和内存管理的工作方式，但从长远来看，似乎在整个地方复制 200k 的 sprite 表可能对性能的成本更高...

【参考方案1】：

通常你会使用 sprite 来改变特定元素的状态，例如对于按钮，而不是一次所有图像。在这种情况下使用 sprite 的好处不仅在于保存请求，还在于即时更改状态（比如鼠标悬停）。