簡介

requestIdleCallback 是瀏覽器的一個 API，用于在瀏覽器空閑時間執行低優先級任務，避免阻塞主線程，提升頁面性能和響應速度。

當瀏覽器完成了關鍵任務（如渲染、布局、用戶交互處理）且暫時沒有更高優先級的工作時，會處于 “空閑狀態”。requestIdleCallback 允許開發者利用這段空閑時間執行非緊急任務（如日志上報、數據預處理、緩存清理等），而不影響頁面的流暢性。

應用場景

• 日志上報：非緊急的用戶行為日志、性能數據等。
• 數據預加載：提前加載可能需要的數據（非首屏必需）。
• 緩存清理：本地存儲（localStorage）的過期數據清理。
• 統計分析：頁面停留時間、元素曝光等非實時計算。

不適合的場景

• 緊急任務：如用戶輸入后的即時反饋、動畫幀更新（應使用 requestAnimationFrame）。
• 長時間任務：單個任務執行時間過長（超過 timeRemaining()），需拆分后分批執行。
• DOM 操作密集型任務：可能觸發重排重繪，建議放在 requestAnimationFrame 中。

語法

// 定義要在空閑時執行的任務
function idleTask(deadline) {// deadline 對象包含：// - timeRemaining()：返回當前空閑時間的剩余毫秒數（動態更新）// - didTimeout：布爾值，表示任務是否因超時執行// 只要有剩余時間且任務未完成，就繼續執行while (deadline.timeRemaining() > 0 && 還有任務要做) {console.log('執行空閑任務...');// 執行部分任務（避免長時間占用線程）}// 如果任務未完成，請求下一次空閑時間繼續執行if (還有任務要做) {requestIdleCallback(idleTask);}
}// 注冊空閑任務（第二個參數可選，設置超時時間）
requestIdleCallback(idleTask, { timeout: 5000 }); 
// 超時時間：若5秒內沒有空閑時間，強制執行任務

• 每次執行時間受 timeRemaining() 限制（通常不超過 50ms），防止任務過長阻塞主線程。
• 通過 timeout 選項確保任務最終會被執行（即使瀏覽器一直忙碌）。