我應該使用requestanimationframe還是setTimeout？

Question

我正在使用畫布的JavaScript應用程序中測試性能。 我遇到的一個問題是FPS的主要波動：以毫秒為單位從60變為2。

如您所見，這里有很多峰值。 這不是由於繪畫，腳本，渲染或加載。 我認為這是因為requestAnimationFrame沒有分配固定的FPS速率，可能太靈活了嗎？ 我應該使用setTimeout嗎？ 在這種情況下，它通常會更可靠嗎，因為它會迫使應用程序僅以一套FPS速率運行？

Answer 1

性能總是與細節有關。 在您的應用程序上沒有更多信息（例如，呈現您應用程序的特定代碼）。 很難說應該如何構造代碼。

通常，您應該始終使用requestAnimationFrame。 特別是用於渲染。

（可選）存儲增量時間，並將您的動畫屬性乘以該增量。 當幀頻不一致時，將創建平滑的動畫。

我還發現隨機幀頻變化通常與垃圾回收有關。 也許進行一些內存分析，以查找是否可以避免每幀重新創建對象的地方。

requestAnimationFrame在幾乎所有方面都優於setTimeout 。 它不會作為背景標簽運行。 節省電池。 它為瀏覽器提供了有關您正在開發的應用程序類型的更多信息，這使給定的瀏覽器可以做出許多安全的性能提升假設。

我強烈建議觀看Nat Duca關於瀏覽器性能的演講。