你知道什麼是空閒回撥(requestIdleCallback)嗎？

王铁柱6發表於2024-12-11

是的，我知道 requestIdleCallback。它是一個瀏覽器 API，允許開發者在瀏覽器空閒時期執行低優先順序任務，例如更新 UI 或執行非關鍵計算，從而避免阻塞主執行緒並保持應用的流暢性。

以下是 requestIdleCallback 的一些關鍵特性：

  • 利用瀏覽器空閒時間： requestIdleCallback 會在瀏覽器空閒時呼叫提供的回撥函式。這意味著在主執行緒處理完高優先順序任務（例如使用者互動、渲染）後，才會執行回撥中的任務。

  • 提高頁面效能： 透過將低優先順序任務推遲到空閒時間執行，可以避免阻塞主執行緒，從而提高頁面響應速度和使用者體驗，防止出現卡頓或延遲。

  • deadline 物件： 回撥函式會接收一個 deadline 物件作為引數。該物件包含 timeRemaining() 方法，用於指示當前幀剩餘的可用時間。開發者可以利用這個資訊來決定在當前幀內執行多少工作，避免超出時間限制。 didTimeout 屬性則表明回撥是否因為超時而被執行。

  • timeout 引數 (可選): 可以設定 timeout 引數，如果瀏覽器在指定時間內都沒有空閒時間，回撥函式也會被強制執行。 這對於有一定時間限制的任務很有用。

  • 返回值 (requestId): requestIdleCallback 會返回一個 requestId，可以使用 cancelIdleCallback(requestId) 來取消已註冊的回撥。

使用示例：

function myLowPriorityTask(deadline) {
  while (deadline.timeRemaining() > 0) {
    // 執行低優先順序任務
    doSomeWork();
    if (shouldStop()) { // 根據需要新增終止條件
      break;
    }
  }

  if (!shouldStop()) { // 如果任務未完成，則再次排程
    requestIdleCallback(myLowPriorityTask);
  }
}

requestIdleCallback(myLowPriorityTask);


function doSomeWork() {
  // 執行具體的操作，例如更新 UI 或進行計算
  // ...
}

function shouldStop() {
  // 判斷是否需要停止任務的邏輯
  // ...
  return false; // 或 true
}

與 setTimeout 的區別：

雖然 setTimeout 也可以用於延遲執行任務，但它與 requestIdleCallback 的主要區別在於執行時機。setTimeout 在指定時間後執行任務，而 requestIdleCallback 則在瀏覽器空閒時執行任務。 因此，requestIdleCallback 更適合處理對時間要求不嚴格的低優先順序任務，可以更好地最佳化頁面效能。

相容性：

requestIdleCallback 的瀏覽器相容性較好，但在一些較老的瀏覽器中可能不支援。 可以使用 polyfill 來解決相容性問題.

總而言之，requestIdleCallback 是一個強大的 API，可以幫助開發者最佳化 web 應用的效能，提高使用者體驗。 透過巧妙地利用瀏覽器的空閒時間，可以執行一些非關鍵任務，而不會影響頁面的流暢性。

相關文章