都在标题中。
我想做任何最快的事情……我认为 5 个 CSS 生成的圆圈加载速度比加载外部图像要快，无论它是否是精灵……但我正在寻找受过更多教育的人提供意见！
圆圈（按比例缩放，目前使用 CSS 生成）：
问问题
369 次
3 回答
3
首先回答您关于哪个更快的问题...... CSS 解决方案更快。 但为什么？
CSS 更快的第一个原因是 HTTP 请求。
每次你有，让我们称它为对象，该对象必须从服务器加载。为此，浏览器必须向服务器发送 HTTP 请求以获取所述文件，服务器必须检查您是否有权访问所述文件，如果有，它会检索它的位置，并将其发送回浏览器。这会发生多次，并且需要百分之一秒的时间来执行。看起来很快，但是您必须执行的这些越多，您的网站就会变得越慢。
CSS 是最快的，因为这 5 个圆圈的 CSS 包含在一个文件 style.css 中
多圈图像精灵比 CSS 慢，因为现在，服务器不仅要为站点的其余部分发送样式表，还必须发送您的图像精灵。可以将其视为从同一卖家从亚马逊订购 2 件完全相同的东西。亚马逊会将这两种物品打包成一个大盒子，因为它更便宜。在任何可能的情况下，您都希望搭载这样的东西，因为它在加载时间上“更便宜”。
作为进一步的解释，如果您要将 5 个圆圈全部加载为单独的图形、5 个单独的 jpgs/pngs/gifs 等。这将需要更长的时间，因为它必须执行 6 个 HTTP 请求而不是 2 个，甚至 1 个（ CSS解决方案）。
CSS 更快的第二个原因是剪切文件大小。
假设您的圈子的 CSS 为每个圈子有 8 行 CSS 代码，总共 40 行。与几千字节相比，这仅代表信息字节。为了更好地理解这一点，您说的是 100-400 字节，而不是 4,000-8,000 字节。
明显的赢家？ CSS
其他注意事项
也就是说......还有其他因素应该影响您的决定。并非所有浏览器都支持边框半径。有关支持边界半径的详细信息，请参阅此链接： 我可以使用吗
由于 IE8 及更低版本不支持边框半径，任何使用 IE8 或更早版本的人都会将您的圆圈呈现为框。您可以通过使用诸如Modernizr之类的东西来填补其中的一些空白来帮助这一点。但是现在，即使您使用仅有助于边界半径的 Modernizr 构建，您也已经添加了 7+kb 的数据和一个额外的 HTTP 请求与此文件，这有点违背您的目的。当然，除非除了边界半径之外还有其他可以使用 Modernizr 的东西，或者如果您使用的边界半径不仅仅是这 5 个圆圈。突然间，额外的数据和 HTTP 请求可以很容易地被证明是合理的。
最终，您的决定应该基于您的目标受众。他们最有可能使用什么浏览器，如果他们主要使用 IE9+、Chrome、Firefox 等。那就去吧。如果您的大量访问者是 IE8 及以下版本，您应该考虑提供后备。例如，仅在 IE8 及以下版本中使用该图像精灵。
于 2013-08-07T15:16:59.413 回答
1
这一切也取决于您的需求。我认为在旧的 IE 版本中没有正确渲染边界半径，所以......也许图像精灵是最好的解决方案。但我再说一遍，这一切都取决于。也许您的客户处于互联网速度较慢的地方（最好使用 css），或者他们可能不会更新 IE 并且卡在 IE6 或 7（精灵）中。
您可以同时使用这两种样式，一个用于带有精灵的 IE 样式表，一个用于 css 边框半径。
于 2013-08-07T14:14:01.987 回答
0
通过 chrome 开发工具检查绘制时间。
应该给你一个好主意。
乙
于 2013-08-07T14:16:55.843 回答