CSS - 优化圆角以提高速度
我正在尝试优化我的网站以提高速度。我之前使用图像作为圆角，但现在我使用 border-radius 和 -moz-border-radius css 规则更改了它们。哪种方式速度最快？我曾经认为 css 规则更快，但我看到很多网站都在谈论 css sprite，现在我有点困惑。哦，我不关心 IE 兼容性，所以你可以建议你想要的任何方法。
I'm trying to optimize my site for speed. I used images for the rounded corners before but now I've changed them with border-radius and -moz-border-radius css rules. Which way is the best for speed? I used to think that css rules are faster but I've seen a lot of sites talking about css sprites and I'm a bit confused now. Oh and I don't care about IE compatibility so you can suggest any method you want.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
速度是这样的： CSS >精灵>单独的图像。
精灵是指您使用单个图像并使用 CSS 对其进行切片/定位，而不是在角上使用单独的图像。它更胖，因为你只下载一张图像。 CSS 是最快的，因为它不需要下载任何东西。
The speed goes like this: CSS > sprites > separate images.
The sprites is when instead of having separate images for the corners you use a single image and slice/position it with CSS. It's fatser, because you only download one image then. CSS is the fastest, because it doesn't need to download anything.
对于那些支持
radiusCSS 属性的浏览器，请使用这些属性。它们肯定更快，因为不需要加载图像并且它们可以由浏览器的本机引擎呈现。对于那些不支持的（较旧的）浏览器，请应用基于图像的解决方法。
不过，不要太担心这些事情。通过该领域的优化所能实现的速度提升非常非常微小。
For those browsers that support
radiusCSS properties, use those. They are definitely faster, because no image needs to be loaded and they can be rendered by the browser's native engine.For those (older) browsers that don't, apply an image-based workaround.
Don't worry too much about this stuff, though. The speed improvements reachable through optimizations in this area are very, very minuscule.
两者完全相同，只是由于 CSS3 规范尚未最终确定，Mozilla 使用
-moz-供应商前缀实现了border-radius。您需要它以及圆角的-webkit-版本才能在 Webkit（Chrome、Safari）和 Mozilla (Firefox) 浏览器上运行。至于速度..目前尚不清楚您是在谈论传输速度还是渲染速度。无论哪种情况，我建议差异可以忽略不计，并且您应该使用所有三个以获得最大的浏览器支持（当然不包括 IE）
Both are exactly the same, except that because CSS3 specifications has yet to be finalized, Mozilla implemented
border-radiuswith the-moz-vendor prefix. You'll need that, and the-webkit-version for rounded corners to function on Webkit (Chrome, Safari) and Mozilla (Firefox) browsers.As for speed.. it is unclear whether you are talking about transfer or rendering speed. In either case I would suggest that the difference is negligible, and you should use all three for maximum browser support (minus IE, of course)
我会推荐 CSS Sprites。这是一个很好的教程： http://bavotasan.com /tutorials/simple-rounded-corners-with-a-css-sprite/
I would recommend CSS Sprites. This is a good tutorial: http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/