CSS - 優化速度的圓角

我試圖優化我的網站的速度。我之前使用過圓角的圖像，但現在我已經使用border-radius和-moz-border-radius css規則更改了它們。哪種方式最適合速度？我曾經認爲css規則更快，但我看過很多網站討論css精靈，現在我有點困惑。哦，我不關心IE的兼容性，所以你可以建議你想要的任何方法。CSS - 優化速度的圓角

來源

2010-08-25 Auxiliary

此外，您需要爲Chrome/Safari提供'-webkit-border-radius'。 – josh3736 2010-08-25 15:22:52

+1不關心IE;） – stephenmurdoch 2010-08-25 15:23:42

速度如下所示：CSS> sprites>單獨的圖像。精靈是當你使用單個圖像而不是單獨的圖像的角落，並切片/定位它與CSS。這很有趣，因爲你只下載一張圖片。 CSS是最快的，因爲它不需要下載任何東西。

來源

2010-08-25 15:23:57

兩者完全相同，只是因爲CSS3規範尚未最終確定，所以Mozilla實施了border-radius並使用-moz-供應商前綴。你需要這個，而圓角的-webkit-版本可以在Webkit（Chrome，Safari）和Mozilla（Firefox）瀏覽器上運行。

至於速度..目前還不清楚你是否在談論轉移或渲染速度。在任何一種情況下，我都會建議這種差異可以忽略不計，你應該使用全部三種瀏覽器來支持最大瀏覽器（當然減去IE）。

來源

2010-08-25 15:22:30

兩者是什麼？使用圖像和使用CSS？我不這麼認爲。 – 2010-08-25 15:25:02

@Radomir「border-radius」和「-moz-border-radius」。應該是更具體的...... – 2010-08-25 15:38:56

我會推薦CSS Sprites。這是一個很好的教程：http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/

來源

2010-08-25 15:23:19 fredley

精靈比使用單獨的圖像更好，但爲什麼使用圖像，如果你可以用內置的瀏覽器功能做同樣的事情？當然，如果你需要一些特殊的角落形狀，而不僅僅是四捨五入，你必須使用圖像，然後精靈是要走的路。 – 2010-08-25 15:26:40

兼容性？這取決於你的目標觀衆我猜。 – fredley 2010-08-25 15:28:33

對於那些支持radius CSS屬性的瀏覽器，請使用這些。它們肯定更快，因爲不需要加載圖像，並且可以通過瀏覽器的本機引擎進行渲染。

對於那些沒有的瀏覽器，應用基於映像的解決方法。

儘管如此，不要太擔心這個東西。通過這方面的優化可以達到的速度是非常非常小的。

來源

2010-08-25 15:23:23

CSS - 優化速度的圓角

回答

相關問題