CSS Sprite 加载速度 - 哪个更快？
哪种技术具有更好的渲染时间并且通常更好？我正在处理的文件非常大，精灵中有超过 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; }
Which technique has better rendering times and is generally better? File i'm working on is very big and there are more than a 300 small icons (16x16) in sprite. Below two examples. First is automatically generated css by SpritesSticker
.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; }
Second is "optimized" version by me.
.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; }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果客户端有任何性能差异，那就是样式的计算，而不是精灵图像的加载。我可以向您保证，性能完全没有差异。
加载时间是服务器或互联网连接的问题，而不是浏览器渲染引擎的问题。
If there are any performance differences at all on the client side, it's in the computation of the styles, not the loading of the sprite images. And I can guarantee you that there are no performance differences at all.
Load times are an issue concerning the server or the Internet connection, not the browser's rendering engine.