在 requestIdleCallback 中使用 requestAnimationFrame

Question

如果我從 JS 對 DOM 中的更改進行動畫處理（例如，將節點的 textContent 的值從 1 更改為 500），在requestIdleCallback中使用requestAnimationFrame或requestAnimationFrame會更好嗎？

Answer 1

如果您想為某些代碼設置動畫，則僅使用requestAnimationFrame ，如果您只想在瀏覽器無事可做時執行操作，則使用requestIdleCallback 。

為簡化起見，讓我們考慮requestAnimationFrame和requestIdleCallback都是setTimeout調用，變量 timeout arguments。

requestAnimationFrame然后將是setTimeout(fn, time_until_next_screen_refresh) 。 fn將在頁面繪制到屏幕之前被調用。 這是目前我們必須制作動畫的最佳計時器，因為它確保我們在每個實際幀中只進行一次視覺修改，以監視器能夠渲染的速度，因此在每一幀，如果我們的代碼很快足夠的。

requestIdleCallback將是setTimeout(fn, time_until_idle) 。 一旦瀏覽器無事可做， fn就會被調用。 這可以立即進行，也可以在幾個事件循環迭代中進行。

因此，雖然兩者都有類似的 API，但它們提供了完全不同的功能，唯一可行的 animation 是requestAnimationFrame ，因為requestIdleCallback基本上與渲染沒有任何聯系。