為 JS 和 CSS3 動畫顯示 FPS 的 JS

Question

我正在做一系列測試（小型研究）以查看使用 JS 為對象設置動畫或使用 CSS3 設置動畫的 JS 之間在流暢動畫（通過測量每秒幀數）方面的差異。

我已經找到了一些在 JS 中獲取 FPS 計數器（米）的解決方案，但是每次調用渲染函數時我都需要調用它。 如果動畫完全是在 javascript 部分完成的，那就沒問題了。 如果我決定從使用 JS 制作動畫轉向 CSS3，據我所知，沒有辦法檢測到該事務的速度有多快。

我知道對於 webkit 瀏覽器（在 Chrome 中測試），我可以通過開發人員工具獲取此類信息，但由於我還將在其他平台上進行測試，因此我正在尋找通用解決方案。

任何想法，建議，任何指向我正確方向的東西都值得贊賞。 謝謝。

Answer 1

所以我找到了解決方案。 它被稱為 FPSMeter，由 David Corvoysier 開發。 您可以在此處找到該庫以及更多相關信息。

基本上他想出了一個好主意，只需在頁面正文中附加 1 個 CSS 動畫元素。 然后他使用過渡來為該元素設置動畫，並在每個 requestAnimationFrame 上嘗試計算該元素的計算位置。 然后他每一秒都簡單地計算元素占據的不同位置的數量。 基於此，他獲得了 FPS。