如何衡量CSS轉換和動畫的性能

我想比較jQuery的動畫功能和純CSS3轉換的性能。我發現有一個requestAnimationFrame API來衡量的性能，但它似乎只能用於畫布元素？如何衡量CSS轉換和動畫的性能

與CSS3和canvas相比，有沒有好的方法來測試絕對定位的性能？

是stats.js有幫助，值得信賴嗎？你有什麼經驗？

我建了這個jsPerf test。不幸的是，jQuery.on方法沒有執行。 :(

2013-02-14 Benny Neugebauer

這將有助於知道你試圖用這個來實現什麼;這是一個簡單的CSS過渡還是你正在開發一個更復雜的動畫，需要畫布元素？ – Ben 2013-02-14 14:26:11

我只想使用一個簡單的過渡。我的目標是比較兩種技術。 – 2013-02-14 15:15:02

我認爲轉換/動畫規則應該在CSS中，因爲它們是表示性的元素，而JavaScript是用於行爲的。因此，我會堅持使用CSS轉換，並讓JavaScript做表單驗證/ ajax /等等，但這並不意味着JavaScript是一種用於動畫的錯誤技術，網絡的本質就是可以以各種方式使用技術，因爲它們之間有很多重疊部分。

我對你有幾個鏈接，我想你可能會發現有用; Paul Irish/Chris Coyier's discussion over translate，在animations in CSS transitions vs Javascript這link showing the framerate comparison jQuery和CSS 可以在第三鏈接看到之間的視頻的CSS絕對快。比JavaScript更平滑;我猜是因爲硬件加速。

夫婦的是同樣的結論計算器問題：what's faster? CSS3 transitions or jQuery animations? :: Performance of CSS Transitions vs. JS animation packages

你說得對，該功能僅適用於canvas元素。如果您打算將CSS轉換與canvas輸出同步，那麼我會推薦使用它，因爲它是爲其生成的，而不是與setInterval一起使用。

來源

2013-02-15 18:50:41 Ben

jQuery的動畫與簡單的JavaScript不一樣。其他類似GSAP的庫可能比jQuery快很多。 – Gherman 2017-11-03 08:30:43

如何衡量CSS轉換和動畫的性能

回答

相關問題