介紹一下requestAnimationFrame和requestIdleCallback

當我們需要執行動畫或其他高性能操作時，常常會遇到以下問題：

- 任務的執行頻率過高，對 CPU 和記憶體造成了大量的壓力。
- 任務的優先順序較高，導致其他任務無法及時得到處理。

為瞭解決這些問題，JavaScript 提供了兩個調度 API：requestAnimationFrame 和 requestIdleCallback。

requestAnimationFrame

requestAnimationFrame  用於在下一幀渲染之前執行動畫或其他任務，確保任務在瀏覽器的重繪之前執行，以獲得最佳的性能和動畫效果。它接收一個回調函數作為參數，回調函數會在下一次瀏覽器重繪之前被調用。由於動畫每秒通常需要執行60次，因此可以使用 requestAnimationFrame  在適當的時間更新動畫，而不會對 CPU 和記憶體造成過大的壓力。

使用 requestAnimationFrame 的基本流程如下：

1. 定義一個動畫函數，用於更新動畫狀態。
2. 在動畫函數中調用 requestAnimationFrame 函數，以便在下一幀動畫之前再次執行動畫函數。

function animate() {
  // 更新動畫狀態的代碼
  requestAnimationFrame(animate);
}

// 啟動動畫
requestAnimationFrame(animate);

上面的代碼中，我們定義了一個 animate 函數，它用於更新動畫狀態。在 animate 函數中，我們通過調用 requestAnimationFrame 函數來啟動下一幀動畫。由於 requestAnimationFrame 會在瀏覽器下一次繪製之前調用回調函數，因此可以保證動畫邏輯總是在正確的時間執行。

需要註意的是，由於 requestAnimationFrame 的執行頻率與瀏覽器的刷新率相關，因此可能會出現跳幀的情況。如果我們需要更高的幀率，可以嘗試使用 requestAnimationFrame 的多個實例來實現。

requestIdleCallback

requestIdleCallback 則用於調度對 CPU 和記憶體影響較大的任務，以確保它們在瀏覽器空閑時執行。它接收一個回調函數作為參數，該回調函數會在瀏覽器空閑時被調用。這意味著 requestIdleCallback 的優先順序比 requestAnimationFrame 更低，因此它更適合用於執行那些不需要及時更新的任務，例如計算、數據處理和網路請求。

使用 requestIdleCallback 的基本流程如下：

1. 定義一個需要執行的任務函數。
2. 使用 requestIdleCallback 函數來調度任務函數的執行。

function process() {
  // 執行較為耗時的任務
}

// 使用 requestIdleCallback 來調度任務的執行
if ('requestIdleCallback' in window) {
  requestIdleCallback(process);
} else {
  setTimeout(process, 0);
}

在上面的代碼中，我們定義了一個 process 函數，它用於執行一些較為耗時的任務。使用 requestIdleCallback 函數來調度任務的執行，這樣可以確保任務在瀏覽器空閑時執行，不會影響其他任務的執行。

需要註意以下幾點：

1. 相容性問題：雖然 requestAnimationFrame 和 requestIdleCallback 都是瀏覽器提供的 API，但它們的相容性並不是所有瀏覽器都支持。需要在使用之前進行相容性檢查和處理，以確保代碼能夠在不同瀏覽器中正常運行。
1. requestAnimationFrame 可能會導致卡頓：儘管 requestAnimationFrame 能夠提高動畫性能，但是在某些情況下可能會導致卡頓。如果動畫邏輯過於複雜或者存在多個 requestAnimationFrame 實例，可能會導致幀率下降，從而影響動畫的流暢度。
2. requestIdleCallback 不保證立即執行：雖然 requestIdleCallback 會在瀏覽器空閑時執行回調函數，但它並不保證回調函數會立即執行。因此，如果任務需要立即執行，可能需要使用 setTimeout 或者 setImmediate 來代替 requestIdleCallback。
3. requestIdleCallback 回調函數需要考慮時間：由於 requestIdleCallback 回調函數會在瀏覽器空閑時執行，因此需要註意回調函數的執行時間，以避免在空閑時間結束之前無法完成任務。

總之，儘管 requestAnimationFrame 和 requestIdleCallback 都是優化 JavaScript 性能的重要工具，但在使用之前需要瞭解其適用場景和註意事項，以確保代碼能夠穩定高效地運行。