css - CSS sprite 和 HTTP 请求

Question

我的第一个问题是：如果我声明多个规则，例如

.link1 {background:url('sprite.png') 0 0;}
.link2 {background:url('sprite.png') -20px -20px;}

这些算作单独的 HTTP 请求吗？我找到了多个答案，现在我知道该图像将从浏览器缓存中获取。

现在提出新问题：我如何在 Chrome/Firefox 中检查这个？我可以在控制台的哪个位置检查样式表中发出了多少 HTTP 请求。

Answer 1

在我的脑海中， YSlow可以帮助解决这个问题

雅虎的卓越性能团队已经确定了 34 条影响网页性能的规则。YSlow 的网页分析基于这 34 条可测试规则中的 23 条。

1. 最小化 HTTP 请求

也就是说，精灵专门减少了发出的 HTTP 请求的数量

Answer 2

打开 Chrome 或 Firefox 开发者工具并检查网络选项卡以查看所有网络操作和请求的列表。

无论在 CSS 中引用多少次，Sprite 都应该只需要一个 GET 请求。它在初始请求后被缓存。

您还可以使用YSlow 之类的工具或在线页面速度测试/分析器来检查网络请求。

Answer 3

这些算作单独的 HTTP 请求吗？

没有。它第一次被缓存，然后从缓存中重用。在某些情况下，使用 SSL 可能会强制浏览器在回访时重新加载它们。

Minimize HTTP Requests规则不错，但如果您的“sprite sheet”变得非常大，样式规则可能会成为管理的噩梦！