css - 雪碧和好处

Question

何时使用精灵，何时不使用

我得到了 50 个图标，我将它们作为精灵制作，但是当我发现在一个页面加载时我需要 1-3 个图标时我感到怀疑 - 并且 1 个图标的大小为 400-500 字节和一个总精灵大小为 28kb

什么是最好的性能加载它们单独或在精灵中，减少http调用可以节省多少？（ofc 这取决于您与服务器的距离等，但它们是一种算法，我可以将其放入并计算我的负载的成本效益因素）

除了在这种情况下无法在实时服务器上进行基准测试之外。

Answer 1

这完全取决于您的用户的行为方式，或者更确切地说，您的普通用户 (AU) 的行为方式。

如果 AU 曾经两次访问您的站点，则仅加载所需的图标会更快。如果 AU 经常访问您的站点，并访问许多不同的页面（这需要您的 sprite 中的大部分图像），那么使用 sprite 会更好。

大多数浏览器都会缓存你的精灵，这样它就只需要加载一次。（单个图像也是如此）

28 Kb 真的不算大，所以我个人会走精灵路线，除非你有很多低带宽用户。

Answer 2

我的错，我不知道你想控制你的框架。使用 .gif 动画，您无法控制它，当它加载时它就会消失。
但是正如您所说，您可以制作它的精灵，只需background: url()为此使用图像即可。
您可能想要制作精灵的变体；例如：当您只需要 3 帧时，您可以制作这 3 帧的精灵。因此，浏览器必须加载的精灵的大小没有完整的精灵那么大。

var frame = 1;

$('.back').attr("disabled", true);  

$(".next").click(function(e)         
{
    $('.back').attr("disabled", false);   
    $('.sprite').animate({backgroundPositionX: "+=-43px"}, 1);
    frame += 1;
    if(frame == 6)
    {
        $('.next').attr("disabled", true);   
    }
})

$(".back").click(function(e)         
{
    $('.next').attr("disabled", false); 
    $('.sprite').animate({backgroundPositionX: "+=43px"}, 1);

    frame -= 1;
    if(frame == 1)
    {
        $('.back').attr("disabled", true);   
    }
})

现在我只使用了 X 轴，所以只有一行精灵。

这是一个例子。