CSS - 优化圆角以提高速度答案

【问题标题】：CSS - Optimizing rounded corners for speedCSS - 优化圆角以提高速度
【发布时间】：2010-08-25 15:19:17
【问题描述】：

我正在尝试优化我的网站以提高速度。我以前使用圆角的图像，但现在我已经用border-radius和-moz-border-radius css规则改变了它们。哪种方式最适合速度？我曾经认为 css 规则更快，但我看到很多网站都在谈论 css sprites，我现在有点困惑。哦，我不关心 IE 兼容性，所以你可以建议任何你想要的方法。

【问题讨论】：

另外，Chrome/Safari 需要 -webkit-border-radius。
+1 表示不关心 IE ;)

标签： performance rounded-corners css-sprites css

【解决方案1】：

速度是这样的：CSS > sprites > 单独的图像。精灵是当您使用单个图像并使用 CSS 对其进行切片/定位时，而不是为角落使用单独的图像。它更胖，因为那时您只下载一张图像。 CSS 是最快的，因为它不需要下载任何东西。

【讨论】：

【解决方案2】：

对于那些支持radius CSS 属性的浏览器，请使用那些。它们肯定更快，因为不需要加载图像并且它们可以由浏览器的原生引擎呈现。

对于那些不支持的（旧版）浏览器，请应用基于图像的解决方法。

不过，不要太担心这些东西。通过该领域的优化可实现的速度提升非常非常微不足道。

【讨论】：

【解决方案3】：

两者完全相同，只是因为 CSS3 规范尚未最终确定，Mozilla 使用 -moz- 供应商前缀实现了 border-radius。您将需要它以及用于圆角的 -webkit- 版本，以便在 Webkit（Chrome、Safari）和 Mozilla (Firefox) 浏览器上运行。

至于速度.. 不清楚您是在谈论传输速度还是渲染速度。在任何一种情况下，我都建议差异可以忽略不计，您应该使用所有这三种来最大程度地支持浏览器（当然要减去 IE）

【讨论】：

两者兼而有之？使用图像和使用 CSS？我不这么认为。
@Radomir border-radius 和 -moz-border-radius 。应该更具体...

【解决方案4】：

我会推荐 CSS Sprites。这是一个很好的教程：http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/

【讨论】：

Sprites 比使用单独的图像要好，但是如果您可以使用内置浏览器功能做完全相同的事情，为什么还要使用图像呢？当然，如果你需要一些特殊的角形状，而不仅仅是圆角，你必须使用图像，然后精灵是要走的路。
兼容性？我猜这取决于您的目标受众。