CSS sprites与数据URI [英] CSS sprites vs data URIs

问题描述

我听说过很多关于使用精灵的重要性，以便让你的请求数减少。但我的想法是，而不是使用精灵，你可以使用URIs来完成相同的事情，更容易（没有精灵创建需要）。

I've heard a lot about the importance of using sprites in order to get your request count down. But my thinking is that rather than use sprites, you can use URIs to accomplish the same thing, and much easier (no sprite creation needed).

最好使用sprites或uris吗？

Is it better to use sprites or uris?

推荐答案

Base64编码的数据大约比原始字节大1/3，所以在下载所有图像数据的页面需要的请求时间是请求的三倍以上，CSS sprites在性能基础上是优越的。

Base64-encoded data is about 1/3 larger than raw bytes, so on pages where downloading all the image data takes more than three times as long as making a request, CSS sprites are superior from a performance basis.

此外，内联数据URI使文件本身加载与实际数据加上base64编码的图像一样长。如果数据URI在您的实际HTML页面上，则意味着停止渲染，并等待加载图像。如果数据URI在您的样式表中，则意味着数据URI之后的任何规则必须等待它才能被处理。另一方面，使用sprite文件，图像可以与您的其他资源同时加载。这可能值得一个额外的请求的成本，特别是当你考虑base64惩罚。

Also, inline data URIs make the file itself take as long to load as the actual data plus the base64-encoded images. If the data URIs are on your actual HTML page, that means rendering stops and waits for the image to load. If the data URIs are in your stylesheet, that means any rules after the data URI have to wait for it before they can be processed. On the other hand, with a sprite file, the images can load concurrently with your other resources. That may be worth the cost of one extra request, especially when you factor in the base64 penalty.

这篇关于CSS sprites与数据URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！