CSS精灵和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开发者工具，然后选中“网络”标签，查看所有网络操作和请求的列表。

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

您还可以使用 YSlow 或 online page speed test / profiler 等工具来检查网络请求。

Answer 3

  

这些是否算作单独的HTTP请求？

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

最小化HTTP请求规则并不错，但如果您的'精灵表'变得非常大，则样式规则可能会成为管理的噩梦！