css - 样式表 + base64 URL（图标） - 缓存？

Question

我试图通过减少对各种图像精灵所做的额外请求并将所有图像精灵嵌入到主样式表中来提高页面的性能。现在我的样式表大小快速增长，现在达到了近 500KB，这让我开始担心——它会在桌面浏览器和移动浏览器中正确缓存吗？

我阅读了有关移动缓存的信息，发现现代（并不真正关心旧的）移动浏览器可以缓存高达 1MB 大小的文件。因此，如果我理解正确，关于缓存的一切都应该没问题，对吧？

然后我也很感兴趣，在单独提供图标精灵（大约 10-20 个文件）或将所有内容包含在一个样式表中（将请求数从 11-21 减少到只有 1 个）时，性能是否有很大差异？

我是否认为一个更大的请求比 10-20 个小请求要好得多？

谢谢

Answer 1

它会在桌面和移动浏览器中正确缓存吗？

当然。没有理由认为它不会，尽管移动浏览器确实有更小的缓存。

我是否认为一个更大的请求比 10-20 个小请求要好得多？

是的，通常是这样。大多数浏览器将被配置为在一个页面中发生多达 4 个并行下载，因此 10-20 个请求将需要更多的连接和响应延迟。

但是两个大请求可以并行完成，所以考虑使用一个大精灵表而不是数据 URI（base64 也比编码的二进制文件大 30% 左右）。