CSS sprites与数据URI

Mar*_*ark 20 css performance

我已经听说过很多关于使用精灵的重要性,以便让您的请求倒计时.但我的想法是,不是使用精灵,而是使用URI来完成同样的事情,并且更容易(不需要精灵创建).

使用精灵或uris更好吗?

Chu*_*uck 27

Base64编码的数据比原始字节大约1/3,因此在下载所有图像数据的页面所需的时间是请求的三倍以上,CSS sprites在性能基础上更胜一筹.

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

  • 这些都很棒.我不认为精灵要求缺点的1请求.主要缺点是必须制作它们,并在进行编辑时重新制作它们. (5认同)