我注意到现在有很多站点将所有图像都放在单个文件中然后使用background-position来偏移屏幕上显示的矩形. 这是出于性能原因吗?如果是这样的话?解决方法 Is this for
... . . 我注意到现在有很多站点将所有图像都放在单个文件中然后使用background-position来偏移屏幕上显示的矩形.
这是出于性能原因吗?如果是这样的话?
.解决方法
. .Is this for performance reasons? If so why?
.>单个请求意味着与服务器的并发连接更少,这意味着可以加载其他内容. TCP连接也会占用服务器上的资源.每个用户的总连接数越少意味着更多用户可以同时使用它(如果您的性能确实是连接限制).
>单个精灵通常比一堆单个图像的文件大小稍微小一些,但这并不能保证,不同的格式会有所不同.
>对象状态一次全部加载意味着交互比您按需加载另一个状态更直接.
>即使当前页面上没有使用精灵的一部分,通过加载它(以及浏览器缓存它),这将在用户查看其他页面时加快用户的浏览体验.
精灵并没有解决所有问题,你可能不应该对它过于肛门,直到你预测到交通拥挤和/或你正在转向CDN,你会按照要求收取费用.
当然,如果你有一整套16×16图标可以在一个地方使用,你可以很快地编写它们.我发现有几个sprite用于特定的事情,这实际上使CSS也更清洁.
. . .. ...