以往常常使用 setTimeout 以及 setInterval 方法來制作 JavaScript 動畫,但是這種方式制作的動畫經常會由於計時器的特性而帶來一些問題。簡單地說一下,計時器動畫有以下幾個問題。
- 間隔時間不精確,可能被阻塞。計時器的間隔指的是將回調函數推入任務隊列的間隔時間,任務隊列中的任務只有在主線程任務執行完畢后才會被執行。
- 計時器動畫的間隔時間如果設定過短就會出現過度渲染占用大量資源,如果設定過長就會影響動畫的流暢度。只能夠估計合適的時間間隔。
- 多數瀏覽器對於計時器動畫沒有優化。
使用 requestAnimationFrame 方法來定義動畫就不會出現以上這些問題。
- requestAnimationFrame 動畫的幀數是由系統根據當前頁面是否可見,CPU 的占用情況等等來決定的,可以最大化地利用系統性能。
- 瀏覽器對 requestAnimationFrame 動畫進行了優化。