CSS 优化答案 - 爱码网

【问题标题】：CSS optimizationCSS 优化
【发布时间】：2010-12-26 04:49:05
【问题描述】：

我注意到 Digg 和 Google 在他们的 GIF 标题图像中使用了一种 CSS 优化。例如 digg 使用此图像：

他们为什么要使用这种技术以及如何在我自己的网站上使用它？

【问题讨论】：

这种技术已经非常普遍。原因是浏览器会为您网站上的每张图片发送一个请求，并且这些请求通常是同步的。这意味着访问者等待每个图像请求发送/接收的时间比它们合并的时间长。即使是异步的，许多 HTTP 协议请求与一个请求相比也会有一定的开销。加载图像地图后，您只需参考要通过 x 和 y 坐标显示的区域。有时服务器会缓存组合图像、JavaScript 和 CSS。 Google 上还有更多内容。
它们属于“webapp 性能优化”。有关 webapp 性能优化的更多信息，您可能会发现这也很有用：developer.yahoo.com/performance/rules.html
@double-beep 我认为那里的图像（现在）是一个错误——它混淆了问题，因为它不是精灵。
@D_N 无需询问我即可随时编辑问题。

【解决方案1】：

这些被称为 CSS 精灵。它们用于减少服务器请求的数量。

【讨论】：

【解决方案2】：

CSS Sprites：图像切片的死亡之吻：
A List Apart

此技术的目的是通过组合所有图像来减少 HTTP 请求。

【讨论】：

【解决方案3】：

它被称为css sprite

【讨论】：

【解决方案4】：

我相信这些被称为 ~~splices~~（或者是 sprites）；基本上，他们一次加载整个图像并告诉 CSS 只显示其中的一部分，这样他们就避免了（预）加载大量图像。

它们增加了对页面的响应能力，因为会立即加载连续的图像。

正如weichsel所说，查看文章@A List Apart。

【讨论】：

【解决方案5】：

他们使用这种技术下载一张图片，而不是浏览器可能建立许多不同的连接来下载多张图片。

然后，您可以使用“背景位置”和“宽度”等 CSS 属性的组合将图像“裁剪”为 CSS 背景图像。

我写这篇文章时其他人发布的链接可能有很好的技术来裁剪图像。

【讨论】：