性能：CSS3動畫與HTML5 Canvas

Question

我正在使用目前使用CSS3過渡構建的webapp（ 僅在Chrome 19+中運行）。 更具體地說，我正在使用Jquery Transit用Jquery本身來激活 CSS3動畫。 這里的原因是一些動畫被抽出幾秒鍾而且jquery 動畫不夠流暢，但是Transit對此很有幫助。 Jquery Transit工作得很好，但我很好奇HTML5 Canvas是否會讓事情變得更加平滑？ 如果是這樣，是否值得追求，因為我目前正在為DIV使用AJAX和基於百分比的位置？ 如果有人知道CSS3動畫如何與Chrome中的HTML5 Canvas性能相比並且願意提供他們的輸入，我將非常感激！

Answer 1

CSS3將減少您的麻煩，您可以在將來輕松地進行更改，並且它可以在不支持畫布的系統上正常工作。

如果你正在使用文本，你應該堅持使用CSS，如果你可以逃脫它。 Canvas會破壞應用程序的可訪問性，並禁止用戶使用克拉或突出顯示文本或使用文本到語音。

如果您只是制作一個有趣的滑動按鈕或其他東西，那么您也應該只使用CSS，因為它可能更容易實現和維護。 重做CSS比輕松（可能很復雜）JavaScript更容易。

我不能老實告訴你畫布效果是否會更順暢。 畫布的一個優點是，您可以將事物設置為看似更大的尺寸（同時保持畫布大小相同），而不必使DOM重新布局。 在大多數現代系統中，這確實不是一個問題。

此外，如果它已經完成了CSS3，你實際上是否存在性能問題？ 如果沒有人抱怨性能，為什么還要為畫布重寫呢？ 如果到目前為止您沒有遇到任何真正的性能問題，為什么要重新發明您的應用？

Answer 2

我認為你可能遇到的問題是它是基於位圖的。 因此，在最初呈現頁面之后放大和縮小將是一個問題。 此外，線路中斷可能會很痛苦。 編寫網站內容的人可能會發現插入換行符很有挑戰性，因為沒有使用canvas，svg或vml的換行符。 實際上，您需要預先計算換行符。 “\\ n”使用raphael.js有效，但效果不佳。 此外，如果您使用svg圖形，則無法使用選擇器來定位各個部分。 你也許可以使用帆布，也許.... Canvas可能有一堆相同的陷阱。

在圖像正面，如果圖像縮放，則會有模糊的圖像，並且存在較少的庫來處理畫布的圖像大小調整。 這可能會在未來發生變化，但仍然是一個難以應對的問題。 我只是堅持你的divs / css3和舊版瀏覽器的jquery回退。

從純粹的績效角度來看，查看您問題的第一條評論。 它有一些不錯的基准。