侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS – 单个图像文件与多个文件的优点

2022-12-28 星期三 / 0 评论 / 0 点赞 / 29 阅读 / 1395 字

我注意到现在有很多站点将所有图像都放在单个文件中然后使用background-position来偏移屏幕上显示的矩形. 这是出于性能原因吗?如果是这样的话?解决方法 Is this for

... . . 我注意到现在有很多站点将所有图像都放在单个文件中然后使用background-position来偏移屏幕上显示的矩形.

这是出于性能原因吗?如果是这样的话?

.

解决方法

. .

Is this for performance reasons? If so why?

.

>单个请求意味着与服务器的并发连接更少,这意味着可以加载其他内容. TCP连接也会占用服务器上的资源.每个用户的总连接数越少意味着更多用户可以同时使用它(如果您的性能确实是连接限制).
>单个精灵通常比一堆单个图像的文件大小稍微小一些,但这并不能保证,不同的格式会有所不同.
>对象状态一次全部加载意味着交互比您按需加载另一个状态更直接.
>即使当前页面上没有使用精灵的一部分,通过加载它(以及浏览器缓存它),这将在用户查看其他页面时加快用户的浏览体验.

精灵并没有解决所有问题,你可能不应该对它过于肛门,直到你预测到交通拥挤和/或你正在转向CDN,你会按照要求收取费用.

当然,如果你有一整套16×16图标可以在一个地方使用,你可以很快地编写它们.我发现有几个sprite用于特定的事情,这实际上使CSS也更清洁.

. . .. ...

广告 广告

评论区