一切都在标题中。
我想做任何最快的事情......我认为 5 个 CSS 生成的圆圈加载速度比加载外部图像更快，无论它是否是 Sprite ......但我正在寻找某人谁受过更多教育才能发表意见!
圆圈(按比例缩放，目前使用 CSS 生成):
最佳答案
首先回答你的问题，哪个更快...... CSS 解决方案更快。 但是为什么？
CSS 更快的第一个原因是 HTTP 请求。
每次你有，我们称它为一个对象，该对象必须从服务器加载。为此，浏览器必须向服务器发送针对该文件的 HTTP 请求，服务器必须检查您是否有权访问该文件，如果有，它会检索该文件的位置，并将其发送回浏览器。这种情况会发生多次，并且需要百分之一秒的时间才能执行。看起来相当快，但是您必须执行的这些操作越多，您的网站就会变得越慢。
CSS 速度最快，因为这 5 个圆圈的 CSS 包含在一个文件 style.css 中
多圆图像 Sprite 比 CSS 慢，因为现在，服务器不仅必须向您发送网站其余部分的样式表，还必须发送您的图像 Sprite 。可以将此视为从同一卖家从亚马逊订购 2 件完全相同的商品。亚马逊将把这两种商品包装成一个大盒子，因为它更便宜。只要有可能，您就想搭载这样的东西，因为它在加载时间上“更便宜”。
作为进一步的解释，如果您要将 5 个圆圈全部作为单独的图形、5 个单独的 jpg/pngs/gif 等加载。这将需要更长的时间，因为它必须执行 6 个 HTTP 请求，而不是 2 个，或者甚至1(CSS解决方案)。
CSS 更快的第二个原因是剪切文件大小。
假设您的圆圈的 CSS 中每个圆圈有 8 行 CSS 代码，总共 40 行。与几千字节相比，这仅代表字节信息。为了更好地理解这一点，您所说的是 100-400 字节，而不是 4,000-8,000 字节。
明显的赢家？ CSS
其他注意事项
也就是说...还有其他因素会影响您的决定。并非所有浏览器都支持边框半径。有关支持 border-radius 的详细信息，请参阅此链接:Can I Use
由于 IE8 及更低版本不支持 border-radius，任何使用 IE8 或更早版本的人都会将您的圆圈渲染为方框。您可以使用类似 Modernizr 的内容来帮助解决此问题填补其中一些空白。但现在，即使您使用仅支持 border-radius 的 Modernizr 版本，您也已在该文件中添加了 7+kb 的数据和额外的 HTTP 请求，这有点违背了您的目的。当然，除非除了 border-radius 之外，您还可以使用 Modernizr 做其他事情，或者您对 border-radius 的使用远不止这 5 个圆圈。突然之间，额外的数据和 HTTP 请求就可以很容易地被证明是合理的。
最终您的决定应该基于您的目标受众。他们最有可能使用什么浏览器，如果他们主要使用 IE9+、Chrome、Firefox 等。那就去吧。如果您的访问者中有大量使用 IE8 及以下版本，您应该考虑提供后备方案。例如，仅在 IE8 及以下版本中使用该图像 Sprite 。
关于performance - 什么更快；通过CSS border-radius生成5个小圆圈；或者使用重复 5 次的小圆圈 CSS Sprite ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18105212/