是否有任何情況下setTimeout（..，0）優於requestAnimationFrame（）？

Question

我一直在使用setTimeout(function(){ ... }, 0)作為將函數調用延遲一個tick的方法。

通常情況下，當我試圖直接操作事件循環以確保事物以特定順序執行時，我一直在使用此方法，並且在大多數情況下，它與UI有關。

有時我會感覺到“滴答”，尤其是當我使用它來運行元素上的第三方JS庫時。

但我最近發現了requestAnimationFrame 。 這幾乎達到了同樣的目的，但是以更優雅的方式。

現在我很好奇，是有它的更有益使用任何情況下setTimeout(function(){ ... }, 0)在requestAnimationFrame(function(){ ... })

Answer 1

我看到的只有紅旗是這個家伙：

當在后台標簽或隱藏的iframe中運行時，回調率可以降低到較低的速率，以便提高性能和電池壽命。

但我相信只有當你有requestAnimationFrame以遞歸方式調用自身時才會發生。

因此，如果您有一些使用requestAnimationFrame的長時間運行的代碼，如果用戶不在該選項卡上，則可能需要更長時間。 除此之外，你正在使用一個函數來做一些它從未打算做的事情，但是setTimeout並沒有被設計為跳過勾選的方式所以......

作為一個忠告：一般來說，我發現你通常可以通過正確使用promises等來避免setTimeout技巧。但我找到了案例，尤其是。 當使用Angular 1.x時我無法找到比使用它更好的解決方案。

有趣的花絮。 通過簡單的性能測試，requestAnimationFrame似乎要快得多：

console.time()
for(let i = 0; i < 100000; i++){
  requestAnimationFrame(() => {(5*5*77/3)*88});
}
console.timeEnd()

得到~80ms（在我的電腦上）

console.time()
for(let i = 0; i < 100000; i++){
  setTimeout(() => {(5*5*77/3)*88}, 0);
}
console.timeEnd()

得到~225ms（在我的電腦上）

Answer 2

他們不是一回事。

使用setTimeout(fn, 0)調用自身的函數將盡可能頻繁地運行。

使用requestAnimationFrame(fn)調用自身的函數將為每個幀調用一次 - 通常為每秒60次。 顧名思義，它適用於動畫，在這種情況下，更新頁面狀態比顯示它更有意義。