PNG或CSS图标-哪个有更好的性能

Question

我正在处理一个网站的小单色像素图标。一个包含所有图标和它们的悬停状态的精灵表，或者一个用纯CSS构建的图标，这个解决方案会有更好的性能。

示例CSS

PNG

my_incon.png

CSS

.icon{
       width:  20px;
       height: 20px;
       Background: red;
       ....
     }

Answer 1

CSS将有更好的性能，原因如下:

• 网络开销小。每个PNG都有需要下载的标题。
• 浏览器"油漆"。PNG需要浏览器在分析完文件后绘制像素。CSS则不需要，因为它会直接呈现给浏览器。
• 同时下载。每个PNG将在一个单独的HTTP调用中下载，但是CSS只下载一次并渲染出来。

Answer 2

CSS精灵会有更好的表现。如果你使用http://gtmetrix.com/测试你的网站，你会发现对服务器的调用越少，网站的速度就会越快，我猜CSS精灵对服务器的调用越少。