許多網站和應用程式有許多執行指令碼需要執行，您的 JavaScript 通常必須盡快執行，但又不想讓使用者看到。如果您在使用者捲動網頁時傳送數據分析資料，或者當使用者輕觸按鈕時，將元素附加至 DOM，您的網頁應用程式可能會沒有回應，導致使用者體驗不佳。
好消息是，現在有一個 API 可提供協助：requestIdleCallback。就像採用 requestAnimationFrame 後，我們得以正確安排動畫時間，盡可能提高達到 60 FPS 的機率，就像在影格結束時或使用者閒置時，requestIdleCallback 都會安排工作。換句話說，您或許能在不干擾使用者的情況下處理自己的工作。目前這項功能已於 Chrome 47 推出，屆時只要使用 Chrome Canary 就能立即體驗！這是一項實驗功能，規格也依然不變，因此未來可能會改變。
為什麼要使用 requestIdleCallback？
要自行安排不必要的工作並不容易。我們無法確切得知影格時間的剩餘時間，因為 requestAnimationFrame 回呼執行後，會需要執行樣式計算、版面配置、繪製和其他瀏覽器內部。「家庭式解決方案」無法計入上述任何可能。為確保使用者「不會」以某種方式互動，您也需要將事件監聽器附加至每種互動事件 (scroll、touch、click)，即使不需要這些功能來提供功能，也「只能」確保使用者並未進行互動。另一方面，瀏覽器則知道影格結束時的可用時間，以及使用者是否正在互動。因此，我們透過 requestIdleCallback 取得 API，能以最有效率的方式利用任何備用時間。
一起來深入瞭解這個部分，看看我們能如何運用它。
正在檢查 requestIdleCallback
requestIdleCallback 是早期日期，因此使用前，請先確認該內容可供使用：
if ('requestIdleCallback' in window) {
// Use requestIdleCallback to schedule work.
} else {
// Do what you’d do today.
}
您也可以因應其行為，而這需要改回 setTimeout：
window.requestIdleCallback =
window.requestIdleCallback ||
function (cb) {
var start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
}
window.cancelIdleCallback =
window.cancelIdleCallback ||
function (id) {
clearTimeout(id);
}
使用 setTimeout 並不是最好的做法，因為我們不知道「requestIdleCallback」的閒置時間，但由於 requestIdleCallback 無法使用時可以直接呼叫函式，所以這種方式不會造成乾擾。使用填充碼後，requestIdleCallback 可以正常運作，你的通話會自動重新導向，這點非常好。
但現在我們假設它存在。
使用 requestIdleCallback
呼叫 requestIdleCallback 與 requestAnimationFrame 非常類似，而且會把回呼函式當做第一個參數：
requestIdleCallback(myNonEssentialWork);
呼叫 myNonEssentialWork 時，系統會給予該 deadline 物件，其中含有一個函式，該函式會傳回數字，指出工作的剩餘時間：
function myNonEssentialWork (deadline) {
while (deadline.timeRemaining() > 0)
doWorkIfNeeded();
}
您可以呼叫 timeRemaining 函式來取得最新的值。如果 timeRemaining() 傳回零，如果仍有其他工作，可以安排另一個 requestIdleCallback：
function myNonEssentialWork (deadline) {
while (deadline.timeRemaining() > 0 && tasks.length > 0)
doWorkIfNeeded();
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
確保函式會呼叫
如果事情相當忙碌，你該怎麼辦？您可能會擔心系統從未呼叫回呼。雖然 requestIdleCallback 和 requestAnimationFrame 很類似，但也不一樣，後者需要選用第二個參數：具有逾時屬性的選項物件。如果設定此逾時，瀏覽器必須執行回呼的時間 (以毫秒為單位)：
// Wait at most two seconds before processing events.
requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });
如果回呼作業是因逾時觸發而執行，您會看到兩項資訊：
timeRemaining()會傳回 0。deadline物件的didTimeout屬性會是 true。
如果看到 didTimeout 為 true，那麼您很可能會只想執行作業並且使用：
function myNonEssentialWork (deadline) {
// Use any remaining time, or, if timed out, just run through the tasks.
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) &&
tasks.length > 0)
doWorkIfNeeded();
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
這項逾時的潛在中斷可能會導致使用者 (這項工作可能會導致應用程式沒有回應或出現資源浪費) 設定這個參數，在可以的情況下，請讓瀏覽器決定何時呼叫回呼。
使用 requestIdleCallback 傳送數據分析資料
讓我們瞭解如何使用 requestIdleCallback 傳送數據分析資料。此時，我們可能會想追蹤類似「輕觸導覽選單」的事件。不過，由於這類事件通常會在畫面上產生動畫，因此我們會避免立即將事件傳送至 Google Analytics。我們會建立要傳送的事件陣列，並要求在未來某個時間點傳送事件：
var eventsToSend = [];
function onNavOpenClick () {
// Animate the menu.
menu.classList.add('open');
// Store the event for later.
eventsToSend.push(
{
category: 'button',
action: 'click',
label: 'nav',
value: 'open'
});
schedulePendingEvents();
}
現在，我們需要使用 requestIdleCallback 來處理任何待處理事件：
function schedulePendingEvents() {
// Only schedule the rIC if one has not already been set.
if (isRequestIdleCallbackScheduled)
return;
isRequestIdleCallbackScheduled = true;
if ('requestIdleCallback' in window) {
// Wait at most two seconds before processing events.
requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });
} else {
processPendingAnalyticsEvents();
}
}
如畫面所示，我已將逾時設為 2 秒，但這個值會因應用程式而異。就數據分析資料而言，使用逾時可確保系統記錄資料的時間合理，而不只是在未來的某個時間點。
最後，我們需要編寫 requestIdleCallback 將執行的函式。
function processPendingAnalyticsEvents (deadline) {
// Reset the boolean so future rICs can be set.
isRequestIdleCallbackScheduled = false;
// If there is no deadline, just run as long as necessary.
// This will be the case if requestIdleCallback doesn’t exist.
if (typeof deadline === 'undefined')
deadline = { timeRemaining: function () { return Number.MAX_VALUE } };
// Go for as long as there is time remaining and work to do.
while (deadline.timeRemaining() > 0 && eventsToSend.length > 0) {
var evt = eventsToSend.pop();
ga('send', 'event',
evt.category,
evt.action,
evt.label,
evt.value);
}
// Check if there are more events still to send.
if (eventsToSend.length > 0)
schedulePendingEvents();
}
在此範例中，我假設如果 requestIdleCallback 不存在，應立即傳送分析資料。不過，在正式版應用程式中，最好以逾時的方式延後傳送，確保不會與任何互動發生衝突並造成卡頓。
使用 requestIdleCallback 執行 DOM 變更
此外，requestIdleCallback 也有助於提升效能，也就是當有不必要的 DOM 變更時，例如在不斷擴增、延遲載入清單的結尾處加入項目。接著來看看 requestIdleCallback 如何實際融入一般影格中。
瀏覽器可能會太忙碌，無法在特定影格中執行任何回呼，因此影格結束時不應「任何」有時間完成其他工作。因此這與 setImmediate 不同，後者「確實」在每個影格執行。
如果回呼在影格結束時「觸發」，會安排在提交目前的影格後執行。也就是說，系統會套用樣式變更，最重要的是計算版面配置。如果我們在閒置回呼內進行 DOM 變更，這些版面配置的計算就會失效。如果下個影格中有任何版面配置讀取 (例如，getBoundingClientRect、clientWidth 等，瀏覽器必須執行強制同步版面配置，這可能導致效能瓶頸。
另一個沒有在閒置回呼中觸發 DOM 變更的原因是，變更 DOM 的時間無法預測，所以我們就可以輕鬆超過瀏覽器提供的期限。
最佳做法是只在 requestAnimationFrame 回呼中進行 DOM 變更，因為瀏覽器會考慮該類型的作業。這表示程式碼需要使用文件片段，可在下一個 requestAnimationFrame 回呼中附加。如果您使用 VDOM 程式庫，就必須透過 requestIdleCallback 進行變更，但會在下一個 requestAnimationFrame 回呼 (而非閒置回呼) 套用 DOM 修補程式。
因此，讓我們看看程式碼：
function processPendingElements (deadline) {
// If there is no deadline, just run as long as necessary.
if (typeof deadline === 'undefined')
deadline = { timeRemaining: function () { return Number.MAX_VALUE } };
if (!documentFragment)
documentFragment = document.createDocumentFragment();
// Go for as long as there is time remaining and work to do.
while (deadline.timeRemaining() > 0 && elementsToAdd.length > 0) {
// Create the element.
var elToAdd = elementsToAdd.pop();
var el = document.createElement(elToAdd.tag);
el.textContent = elToAdd.content;
// Add it to the fragment.
documentFragment.appendChild(el);
// Don't append to the document immediately, wait for the next
// requestAnimationFrame callback.
scheduleVisualUpdateIfNeeded();
}
// Check if there are more events still to send.
if (elementsToAdd.length > 0)
scheduleElementCreation();
}
我在這裡建立元素並使用 textContent 屬性來填入內容，但從這方面來說，加入元素建立程式碼的可能性比較高！呼叫建立元素 scheduleVisualUpdateIfNeeded 後，系統會設定單一 requestAnimationFrame 回呼，接著將文件片段附加至主體：
function scheduleVisualUpdateIfNeeded() {
if (isVisualUpdateScheduled)
return;
isVisualUpdateScheduled = true;
requestAnimationFrame(appendDocumentFragment);
}
function appendDocumentFragment() {
// Append the fragment and reset.
document.body.appendChild(documentFragment);
documentFragment = null;
}
總之，當將項目附加至 DOM 時，所看到的卡頓情形會大幅減少。棒極了！
常見問題
- 是否有 polyfill？
雖然不行，但如果您想以透明化的方式重新導向至
setTimeout，可以使用輔助程式。之所以存在這個 API，是因為這個 API 可以填補網路平台的真正缺口。推論缺乏活動並不容易，但沒有 JavaScript API 會在影格結束時判斷可用時間，因此最好還是猜測。setTimeout、setInterval或setImmediate等 API 可用來安排工作時間，但無法以requestIdleCallback的方式避免使用者互動。 - 如果超過期限，會怎麼樣？
如果
timeRemaining()傳回零，但您選擇執行更長的時間，就不必擔心瀏覽器停止作業。然而，這個瀏覽器在期限內嘗試確保使用者擁有順暢的使用體驗，因此除非有足夠理由，否則請務必遵循期限。 timeRemaining()是否傳回最大值？ 是，目前是 50 毫秒。當嘗試維持回應式應用程式時，所有對使用者互動的回應都應控制在 100 毫秒以內。在大多數的情況下，使用者與 50 毫秒互動的視窗應該能讓系統完成閒置回呼，並讓瀏覽器回應使用者互動。如果瀏覽器判定有足夠時間執行這些回呼，您可能會安排多筆閒置回呼。- 在 requestIdleCallback 中是否應該做任何工作？
在理想情況下，任務內容應置於可預測特徵的小型區塊 (微任務)。舉例來說，變更 DOM 會觸發樣式計算、配置、繪製和合成，造成無法預測的執行時間。因此，建議您只按照上述建議在
requestAnimationFrame回呼中進行 DOM 變更。另一個值得注意的是解析 (或拒絕) Promise，因為即使已經沒有剩餘的時間，回呼也會在閒置的回呼完成後立即執行。 - 影格結束時是否一律會顯示
requestIdleCallback？ 不一定。每當影格結束時或使用者閒置期間，瀏覽器就會安排回呼。您不應預期每個頁框都會呼叫回呼，而如需在指定時間範圍內執行，則應使用逾時。 - 我可以擁有多個
requestIdleCallback回呼嗎？ 可以，盡可能擁有多個requestAnimationFrame回呼。但值得注意的是，如果第一次回呼在回呼期間耗盡剩餘的時間，其他回呼就沒有多餘的時間。而其他回呼則必須等到瀏覽器下次處於閒置狀態後才能執行。視您想完成的工作而定，最好設定單一閒置回呼，並將工作分割於其中。或者，您也可以利用逾時，確保不會有時間損失回呼。 - 如果在當中設定新的閒置回呼，會發生什麼情況？ 新的閒置回呼會安排盡快執行 (從「下一個」影格 (而非目前的回呼) 開始)。
閒置了！
requestIdleCallback 是確保您可以執行程式碼，卻不會妨礙使用者操作的實用方法。它簡單好用，而且極具彈性。不過這項設計仍處於早期階段，而且規格尚未設定完成，歡迎您提供任何意見回饋。
透過 Chrome Canary 來體驗看看，測試您的專案，並告訴我們您目前的進展！