哪个更有效，spritesheet 或 css 类答案

【问题标题】：Which is more efficient, spritesheet or css classes哪个更有效，spritesheet 或 css 类
【发布时间】：2014-03-03 04:48:07
【问题描述】：

我想在用户点击 div 时对其进行反馈。 div 将迅速褪色为另一种颜色，然后再次恢复为原始颜色。

我的第一个选择是使用 spritesheet，我将在其中更改 div 的背景位置属性。部分实现如下所示：

pos = 0;
function fadeAction(el){
   if (pos != 100){
     pos += 10;
     $(el).css("background-position","0% "+pos+"%");
     setTimeout(function(){fadeAction(el);},10);
   }else
      pos=0;
   }

我的第二个选择是根据颜色数组更改背景颜色：

colors = ["#FF00FF","#443322", etc]; 
i = 0;
function fadeAction(el){
   if (pos != 10){
     i += 1;
     $(el).css("background-color",colors[i]);
     setTimeout(function(){fadeAction(el);},10);
   }else
      i=0;
   }

我的第三个选项（由于设备不兼容将被废弃）是使用 jquery.color。

function fadeAction(el){
  $(el).css("background-color",fadeColor);
  $(el).animate({
    backgroundColor: "#E9E9E9"
  }, 150 );

}

这两种方法中的哪一种（放弃第三种）最有效？页面上会有多个按钮 (div) 使用此功能，主要用于带有 webkit 浏览器的移动设备。

【问题讨论】：

您是否也考虑过为此使用 css-transitions 或动画？
如果只是颜色，为什么需要spritesheet？它比 CSS 类更难改变。此外，CSS 动画（仅限现代浏览器）比 JS 效果更快
我还没有考虑过 css 过渡，我现在就去阅读一下

标签： javascript jquery html css

【解决方案1】：

使用 CSS3 可获得最佳性能。这是因为它的浏览器使用硬件加速。

编辑：我错了（thanx Zougen Moriver）它不会自动触发（见评论）但它仍然有better performance over the javascript solutions。

这是一个例子：

.test {
    height: 100px;
    width: 100px;
    background-color: #eee;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
.test:hover {
    background-color: #fc3;
}

http://jsfiddle.net/Vandeplas/LZNZb/

我使用悬停是因为它不需要 javascript，但是如果您更改颜色（通过 javascript，通过添加类或更改样式），它将淡出为该颜色。

缺点是它isn't supported on legacy browsers..

这是一个使用点击处理程序的示例：

$('.test').on('click', function() {
    $(this).css('background-color', 'green');
    //$(this).addClass('otherColor');
});

http://jsfiddle.net/Vandeplas/LZNZb/1/

如您所见，我使用该类注释掉了另一个选项...两者都可以工作...

【讨论】：

这是将在 Android webview 中使用的小部件的一部分，因此旧版浏览器不是我的大问题。谢谢你的回答
如何在点击时进行过渡？
单独的转换不会触发硬件加速。您需要应用诸如 transform: translate3d() 之类的属性来触发此操作 - 但对于颜色更改来说，这完全是矫枉过正。

【解决方案2】：

如果您只是更改纯色，则 CSS 样式选项将比 spritesheets 更有效。浏览器无需为您的 spritesheet 发出额外的 HTTP 请求，并且使用 CSS 过渡，您将能够在颜色之间淡入淡出。

设备内存中的资源也会减少。

要转换颜色，请应用以下 CSS：

.yourElement {
    -webkit-transition: color 150ms;
    transition: color 150ms;
}

..然后继续使用您的 JavaScript 来切换点击时的颜色变化。

【讨论】：