【问题标题】: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 比使用单独的图像要好,但是如果您可以使用内置浏览器功能做完全相同的事情,为什么还要使用图像呢?当然,如果你需要一些特殊的角形状,而不仅仅是圆角,你必须使用图像,然后精灵是要走的路。
      • 兼容性?我猜这取决于您的目标受众。
      猜你喜欢
      • 1970-01-01
      • 2011-06-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-24
      • 2021-07-23
      相关资源
      最近更新 更多