10-01:setTimeout、setInterval 和 requestAnimationFrame 之間的區(qū)別

與 setTimeout 和 setInterval 不同,requestAnimationFrame 不需要設置時間間隔, 大多數(shù)電腦顯示器的刷新頻率是 60Hz,大概相當于每秒鐘重繪 60 次。大多數(shù)瀏覽器都會對重繪操作加以限制,不超過顯示器的重繪頻率,因為即使超過那個頻率用戶體驗也不會有提升。因此,最平滑動畫的最佳循環(huán)間隔是 1000ms/60,約等于 16.6ms。

RAF 采用的是系統(tǒng)時間間隔,不會因為前面的任務,不會影響 RAF,但是如果前面的任務多的話, 會響應 setTimeout 和 setInterval 真正運行時的時間間隔。

特點:

(1)requestAnimationFrame 會把每一幀中的所有 DOM 操作集中起來,在一次重繪或回流中就完成,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率。

(2)在隱藏或不可見的元素中,requestAnimationFrame 將不會進行重繪或回流,這當然就意味著更少的 CPU、GPU 和內存使用量

(3)requestAnimationFrame 是由瀏覽器專門為動畫提供的 API,在運行時瀏覽器會自動優(yōu)化方法的調用,并且如果頁面不是激活狀態(tài)下的話,動畫會自動暫停,有效節(jié)省了 CPU 開銷。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容