CSS Sprite加载速度 - 哪个更快？

Question

哪种技术具有更好的渲染时间，通常更好？我正在处理的文件非常大，精灵中有超过300个小图标（16x16）。下面两个例子。首先是SpritesSticker

自动生成的css

.sr-chat-min-btn { background: url(icons.png) no-repeat 0px -153px; }
.sr-btn-views { background: url(icons.png) no-repeat -42px -141px; }
.sr-star-gold-right { background: url(icons.png) no-repeat -21px -141px; }

其次是我的“优化”版本。

.sr-chat-min-btn, .sr-btn-views, .sr-star-gold-right { background:  url(icons.png) no-repeat }
.sr-chat-min-btn { background-position: 0px -153px; }
.sr-btn-views { background-position: -42px -141px; }
.sr-star-gold-right { background-position: -21px -141px; }

Answer 1

如果客户端存在任何性能差异，那就是样式的计算，而不是精灵图像的加载。我可以向您保证没有性能差异。

加载时间是服务器或Internet连接的问题，而不是浏览器的渲染引擎。