优化CSS：精灵还是重复背景图片？

Question

所以我的任务是优化网站的CSS。目前，他们的按钮都是使用如下图像精灵完成的：

这些精灵都被放入一个大的.png（其上有40个左右的不同按钮）。

如果我将按钮用作HTML而不是图像，我想它会像下面那样：

<style type="text/css">
  a.button
  {
    display: block;
    width: 175px;
    height: 35px;
    background: url("../images/green-gradient.jpg");
    background-repeat: repeat-x;
  }

  a.button:hover
  {
   background: url("../images/green-gradient-hover");
  }
</style>

<a href="#" class="button">Arrange Demo</a>

如上所述将这些按钮作为HTML进行更加优化（重复1px乘35px的重复背景图像），还是像当前那样的精灵？

如果我像上面那样使用HTML，那么在悬停时使用不同的重复背景是否有任何性能影响？

Answer 1

当您加载较小的文件并重新使用它时，您的上述方法肯定会更有效。也就是说，如果可能的话，使用CSS3渐变可能会更有效。你也可以使用一些javascript来使它更​​像浏览器，比如modernizr。

请参阅Google PageSpeed Insights分析您的网站加载时间。

请参阅Can I Use It以查看浏览器对CSS3渐变的支持。