核心要點(diǎn)

• JavaScript 是一種阻塞式語言，一次只能執(zhí)行一項(xiàng)任務(wù)，這可能導(dǎo)致長時(shí)間運(yùn)行的腳本使瀏覽器無響應(yīng)。但是，可以安排不太重要的后臺(tái)任務(wù)運(yùn)行，而不會(huì)直接影響用戶體驗(yàn)。
• requestIdleCallback 是一個(gè) API，允許在瀏覽器空閑時(shí)安排非必要任務(wù)，類似于 requestAnimationFrame 的功能。它可以與超時(shí)選項(xiàng)一起使用，以確保任務(wù)在設(shè)定的時(shí)間范圍內(nèi)運(yùn)行，即使瀏覽器不空閑也是如此。
• requestIdleCallback 是一項(xiàng)實(shí)驗(yàn)性功能，瀏覽器支持有限，不適用于執(zhí)行時(shí)間不可預(yù)測的任務(wù)或解決 Promise 的任務(wù)。對于不支持的瀏覽器或需要直接訪問 DOM 的任務(wù)，可以使用 Web Workers 或 setTimeout 等替代方案。

如果忘記 JavaScript 的其他所有內(nèi)容，請永遠(yuǎn)記住這一點(diǎn)：它會(huì)阻塞。想象一下，一個(gè)神奇的處理精靈讓您的瀏覽器工作。無論是渲染 HTML、響應(yīng)菜單命令、在屏幕上繪圖、處理鼠標(biāo)點(diǎn)擊還是運(yùn)行 JavaScript 函數(shù)，所有這些都由單個(gè)精靈處理。像我們大多數(shù)人一樣，精靈一次只能做一件事情。如果我們向精靈扔很多任務(wù)，它們會(huì)被添加到一個(gè)大的待辦事項(xiàng)列表中，并按順序處理。當(dāng)精靈遇到腳本標(biāo)簽或必須運(yùn)行 JavaScript 函數(shù)時(shí)，其他所有內(nèi)容都會(huì)停止。代碼（如果需要）將被下載并在處理進(jìn)一步事件或渲染之前立即運(yùn)行。這是必要的，因?yàn)槟哪_本可以執(zhí)行任何操作：加載更多代碼、刪除每個(gè) DOM 元素、重定向到另一個(gè) URL 等。即使有兩個(gè)或多個(gè)精靈，其他精靈也需要在第一個(gè)精靈處理您的代碼時(shí)停止工作。這就是阻塞。這就是長時(shí)間運(yùn)行的腳本導(dǎo)致瀏覽器無響應(yīng)的原因。您通常希望 JavaScript 盡快運(yùn)行，因?yàn)榇a會(huì)初始化窗口小部件和事件處理程序。但是，還有一些不太重要的后臺(tái)任務(wù)不會(huì)直接影響用戶體驗(yàn)，例如：

• 記錄分析數(shù)據(jù)
• 將數(shù)據(jù)發(fā)送到社交網(wǎng)絡(luò)（或添加 57 個(gè)“分享”按鈕）
• 預(yù)取內(nèi)容
• 預(yù)處理或預(yù)渲染 HTML

這些不是時(shí)間關(guān)鍵型任務(wù)，但是為了使頁面保持響應(yīng)速度，它們不應(yīng)該在用戶滾動(dòng)或與內(nèi)容交互時(shí)運(yùn)行。一種選擇是使用 Web Workers，它可以在單獨(dú)的線程中并發(fā)運(yùn)行代碼。這是預(yù)取和處理的一個(gè)很好的選擇，但您不允許直接訪問或更新 DOM。您可以在自己的腳本中避免這種情況，但您無法保證第三方腳本（例如 Google Analytics）永遠(yuǎn)不需要它。另一種可能性是 setTimeout，例如 setTimeout(doSomething, 1);。瀏覽器將在其他立即執(zhí)行的任務(wù)完成后執(zhí)行 doSomething() 函數(shù)。實(shí)際上，它被放在待辦事項(xiàng)列表的底部。不幸的是，無論處理需求如何，該函數(shù)都會(huì)被調(diào)用。

requestIdleCallback

requestIdleCallback 是一個(gè)新的 API，旨在在瀏覽器喘息的那些時(shí)刻安排非必要的后臺(tái)任務(wù)。它讓人想起 requestAnimationFrame，它會(huì)在下一次重繪之前調(diào)用一個(gè)函數(shù)來更新動(dòng)畫。您可以在此處閱讀有關(guān) requestAnimationFrame 的更多信息：使用 requestAnimationFrame 進(jìn)行簡單動(dòng)畫

我們可以像這樣檢測是否支持 requestIdleCallback：

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 執(zhí)行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

您還可以使用超時(shí)（以毫秒為單位）指定選項(xiàng)對象參數(shù)，例如：

requestIdleCallback(backgroundTask, { timeout: 3000 });

這確保您的函數(shù)在最初三秒鐘內(nèi)被調(diào)用，無論瀏覽器是否空閑。requestIdleCallback 只調(diào)用您的函數(shù)一次，并傳遞一個(gè)具有以下屬性的截止日期對象：

• didTimeout — 如果可選超時(shí)觸發(fā)，則設(shè)置為 true
• timeRemaining() — 返回可執(zhí)行任務(wù)的剩余毫秒數(shù)的函數(shù)

timeRemaining() 將為您的任務(wù)分配不超過 50 毫秒的運(yùn)行時(shí)間。它不會(huì)停止超過此限制的任務(wù)，但最好再次調(diào)用 requestIdleCallback 來安排進(jìn)一步的處理。讓我們創(chuàng)建一個(gè)簡單的示例，它按順序執(zhí)行多個(gè)任務(wù)。任務(wù)作為函數(shù)引用存儲(chǔ)在數(shù)組中：

// 要運(yùn)行的函數(shù)數(shù)組
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 盡快運(yùn)行所有任務(wù)
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回調(diào)函數(shù)
function backgroundTask(deadline) {
  // 如果可能，運(yùn)行下一個(gè)任務(wù)
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排進(jìn)一步的任務(wù)
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

在 requestIdleCallback 中不應(yīng)該執(zhí)行的操作？

正如 Paul Lewis 在他關(guān)于此主題的博客文章中所指出的那樣，您在 requestIdleCallback 中執(zhí)行的工作應(yīng)該分成小塊。它不適用于執(zhí)行時(shí)間不可預(yù)測的任何內(nèi)容（例如操作 DOM，最好使用 requestAnimationFrame 回調(diào)來完成）。您還應(yīng)該注意解決（或拒絕）Promise，因?yàn)榛卣{(diào)將在空閑回調(diào)完成后立即執(zhí)行，即使沒有更多剩余時(shí)間也是如此。

requestIdleCallback 瀏覽器支持

requestIdleCallback 是一項(xiàng)實(shí)驗(yàn)性功能，規(guī)范仍在不斷變化，因此當(dāng)您遇到 API 更改時(shí)不要感到驚訝。它在 Chrome 47 中受支持……這應(yīng)該在 2015 年底之前可用。Opera 也應(yīng)該很快獲得此功能。Microsoft 和 Mozilla 都正在考慮使用該 API，而且聽起來很有希望。蘋果公司像往常一樣沒有消息。如果您想今天嘗試一下，最好的辦法是使用 Chrome Canary（Chrome 的一個(gè)更新版本，測試不如前者完善，但擁有最新的炫酷功能）。Paul Lewis（上面提到）創(chuàng)建了一個(gè)簡單的 requestIdleCallback shim。這實(shí)現(xiàn)了 API 的描述，但它不是可以模擬瀏覽器空閑檢測行為的 polyfill。它采用像上面的示例一樣使用 setTimeout 的方法，但如果您想在沒有對象檢測和代碼分叉的情況下使用 API，這是一個(gè)不錯(cuò)的選擇。雖然今天的支持有限，但 requestIdleCallback 可能是幫助您最大限度地提高網(wǎng)頁性能的有趣工具。但您怎么看呢？我很樂意在下面的評論部分聽到您的想法。

關(guān)于在 JavaScript 中調(diào)度后臺(tái)任務(wù)的常見問題解答 (FAQ)

什么是 JavaScript 中的后臺(tái)任務(wù) API？

JavaScript 中的后臺(tái)任務(wù) API 是一種強(qiáng)大的工具，允許開發(fā)人員安排后臺(tái)運(yùn)行的任務(wù)，即使主線程空閑也是如此。此 API 特別適用于需要大量計(jì)算或網(wǎng)絡(luò)請求的任務(wù)，因?yàn)樗试S執(zhí)行這些任務(wù)而不會(huì)阻塞主線程并可能導(dǎo)致糟糕的用戶體驗(yàn)。后臺(tái)任務(wù) API 是現(xiàn)代瀏覽器提供的更大 Web API 的一部分，與傳統(tǒng)的 setTimeout 或 setInterval 方法相比，它提供了一種更高效且更注重性能的處理后臺(tái)任務(wù)的方法。

后臺(tái)任務(wù) API 與 setTimeout 和 setInterval 有何不同？

setTimeout 和 setInterval 函數(shù)是 JavaScript 中用于安排任務(wù)在特定延遲后或以定期間隔運(yùn)行的傳統(tǒng)方法。但是，這些方法有一些限制，尤其是在性能方面。它們在主線程上運(yùn)行，這意味著如果它們花費(fèi)太長時(shí)間才能完成，它們可能會(huì)阻塞其他任務(wù)并可能導(dǎo)致糟糕的用戶體驗(yàn)。另一方面，后臺(tái)任務(wù) API 在后臺(tái)運(yùn)行任務(wù)，與主線程分開。這意味著它可以處理更密集的任務(wù)，而不會(huì)影響主線程的性能。

我可以在所有瀏覽器中使用后臺(tái)任務(wù) API 嗎？

后臺(tái)任務(wù) API 是現(xiàn)代瀏覽器提供的 Web API 的一個(gè)相對較新的補(bǔ)充，因此，它可能并非在所有瀏覽器中都受支持。在您的項(xiàng)目中計(jì)劃使用任何 API 時(shí)，始終最好檢查您計(jì)劃使用的 API 的當(dāng)前支持級別。像 Can I Use 這樣的網(wǎng)站提供了有關(guān)不同瀏覽器中各種 API 的支持級別的最新信息。

如何使用后臺(tái)任務(wù) API 安排后臺(tái)運(yùn)行的任務(wù)？

要使用后臺(tái)任務(wù) API 安排任務(wù)，您可以使用 requestIdleCallback 方法。此方法將回調(diào)函數(shù)作為其第一個(gè)參數(shù)，該函數(shù)將在瀏覽器空閑時(shí)執(zhí)行。這是一個(gè)基本示例：

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 執(zhí)行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

如何取消已安排的后臺(tái)任務(wù)？

如果您需要取消使用 requestIdleCallback 方法安排的后臺(tái)任務(wù)，可以使用 cancelIdleCallback 方法。此方法將 requestIdleCallback 返回的 ID 作為其參數(shù)。這是一個(gè)示例：

requestIdleCallback(backgroundTask, { timeout: 3000 });

requestIdleCallback 中的超時(shí)選項(xiàng)有什么用？

requestIdleCallback 中的超時(shí)選項(xiàng)用于指定瀏覽器在運(yùn)行回調(diào)之前應(yīng)等待的最大時(shí)間（以毫秒為單位），即使它不空閑也是如此。如果您的后臺(tái)任務(wù)需要在特定時(shí)間范圍內(nèi)運(yùn)行，這將非常有用。

如何處理后臺(tái)任務(wù)中的錯(cuò)誤？

處理使用后臺(tái)任務(wù) API 安排的后臺(tái)任務(wù)中的錯(cuò)誤類似于處理任何其他 JavaScript 代碼中的錯(cuò)誤。您可以使用 try/catch 塊來捕獲在任務(wù)執(zhí)行期間發(fā)生的任何錯(cuò)誤。這是一個(gè)示例：

// 要運(yùn)行的函數(shù)數(shù)組
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 盡快運(yùn)行所有任務(wù)
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回調(diào)函數(shù)
function backgroundTask(deadline) {
  // 如果可能，運(yùn)行下一個(gè)任務(wù)
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排進(jìn)一步的任務(wù)
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

我可以在 Node.js 中使用后臺(tái)任務(wù) API 嗎？

后臺(tái)任務(wù) API 是現(xiàn)代瀏覽器提供的 Web API 的一部分，因此默認(rèn)情況下它在 Node.js 中不可用。但是，還有其他方法可以在 Node.js 中運(yùn)行后臺(tái)任務(wù)，例如使用工作線程或子進(jìn)程。

我可以將后臺(tái)任務(wù) API 與 Promise 或 async/await 一起使用嗎？

后臺(tái)任務(wù) API 不返回 Promise，因此不能直接與 async/await 一起使用。但是，如果您需要在異步上下文中使用它，則可以將 requestIdleCallback 方法包裝在 Promise 中。這是一個(gè)示例：

window.requestIdleCallback(() => {
  // 您的后臺(tái)任務(wù)在此處
});

后臺(tái)任務(wù) API 的一些用例是什么？

后臺(tái)任務(wù) API 對于任何需要大量計(jì)算或網(wǎng)絡(luò)請求的任務(wù)都很有用，因?yàn)樗试S執(zhí)行這些任務(wù)而不會(huì)阻塞主線程。用例的一些示例可能包括從 API 獲取和處理數(shù)據(jù)、執(zhí)行復(fù)雜的計(jì)算或根據(jù)用戶交互更新 UI。

以上是如何在JavaScript中安排背景任務(wù)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！