在 Javascript 中利用多執行緒 - 不是關於 WebWorkers 也不是 WebAssembly

眾所周知，JavaScript 在單執行緒上運行。這個概念是如此不可或缺，以至於我們經常用名稱來引用它 - 主線程。那麼，這是否意味著你的多核心 CPU 在執行 JavaScript 時毫無用處？

不完全是。

JavaScript 可能有點厚顏無恥，發送有關其主題的混合訊息。

但即使不深入研究 Web Workers 和 WebAssembly 等更複雜的功能，基本的 JavaScript 也可以利用多執行緒工作流程。

需要明確的是，本文將重點放在基於 Web 瀏覽器的 JavaScript。其他環境（例如 Node.js）可能會以不同的方式處理事情。

我們將探索 JavaScript 中多執行緒和類別多執行緒操作的選項。現實是 - 您可以而且應該在基本的、純原生 JavaScript 中使用多執行緒工作流程。

“解釋！”

很高興。

JavaScript 是一種單執行緒語言，但它由網頁瀏覽器解釋 - 而瀏覽器是多執行緒軟體。

有多種方法可以模擬和利用多線程，您可能在沒有意識到的情況下使用它們。

此外，JavaScript 的行為方式通常看起來是多執行緒的，但實際上並非如此。這聽起來像是作弊，但它有效地提供了我們期望從多執行緒行為中獲得的好處。

基於事件的程式設計感覺是多執行緒的

JavaScript 是一個基於事件的系統。當瀏覽器處理 JavaScript 檔案時，它會運行其中的所有程式碼。完全有可能編寫不停止運行的程式碼 - 儘管這通常是一個壞主意，因為它可能會導致瀏覽器崩潰。

我們通常做的就是設定事件監聽器並等待事件發生。此時，JavaScript 完全空閒。如果不從主執行緒卸載一些工作，這種空閒等待是不可能的。

事件本身不是多執行緒的，但事件的等待和檢查是由瀏覽器處理的，而不是由 JavaScript 處理。此程序從主執行緒卸載。

非同步函數和多線程

像 setTimeout 和 setInterval 這樣的函數已經陪伴我們很多年了。他們減輕了主執行緒的等待時間。

讓我們來簡化一下它的運作原理。在較低階語言中，計時器和等待通常是透過不斷檢查「時間到了嗎？」來實現的。想像 while() 迴圈檢查經過的時間並在時間正確時繼續執行。現代方法可能會使用 CPU 中斷來避免阻塞 CPU 執行緒。

但是，當您在 JavaScript 中使用 setTimeout 或 setInterval 時，語言在等待期間完全空閒，這再次意味著等待以某種方式在主執行緒之外進行處理。

Fetch 和其他非同步 API

如今，我們從瀏覽器獲得越來越多的非同步函數和 API。 fetch API 是一個眾所周知的例子。即使是較新的 API，例如剪貼簿 API，也是非同步的。

這表示您要求瀏覽器執行一個操作，它會釋放 JavaScript 的主執行緒（或允許它處理其他內容 - 稍後會詳細介紹）並在完成時通知您（透過處理以下程式碼）。

非同步與多線程

非同步並不一定意味著多執行緒－並不總是、不直接。簡單地將「async」這個字放在函數前面對你來說沒有任何作用。

JavaScript 如何處理異步步行為有兩個關鍵組件：

1. 回呼隊列和事件循環

將回呼佇列視為一行等待運行的函數。這些函數在主線程中一一執行。當非同步操作完成時 - 無論是事件、逾時或已完成的獲取 - 其回呼都會放置在此佇列中。

事件循環負責當呼叫堆疊為空時將回調從佇列移動到呼叫堆疊。

2. 瀏覽器處理的函數

網頁瀏覽器控制某些操作，並可能為它們啟動新執行緒 - 這包括 fetch 或 setTimeout 等操作。 JavaScript 不需要管理這些線程。當非同步操作完成後，瀏覽器將對應的回呼放入回呼佇列中，JavaScript 從那裡繼續執行。

考慮這段程式碼：

輸出：

發生的事情是這樣的：

• 「開始」已記錄。
• setTimeout 呼叫時沒有逾時參數，因此預設為 0 毫秒。當前呼叫堆疊清空後，回呼將發送到瀏覽器執行。
• 「結束」已記錄。
• 主執行緒現在空閒，事件循環檢查回呼佇列。
• setTimeout 的回呼函數被移至呼叫堆疊。
• 記錄“這是異步的”。

注意 setTimeout 缺少超時參數。這是推遲低優先級程式碼執行的常見技術 - 首先處理所有其他內容，完成後，執行「較低優先順序」的事情。

它的作用是立即將 setTimeout 內的函數放入回調佇列中，並在主執行緒空閒時第一時間運行。

requestAnimationFrame 的特例

requestAnimationFrame 是一個瀏覽器 API，它告訴瀏覽器您想要在計算和更新視圖之前執行一些程式碼（將其視為視訊遊戲中的每秒幀數）。

出於某種原因，Web 開發人員不會考慮重繪和 FPS，但這就是它的工作原理。

它本質上是非同步的（儘管不是多執行緒）。

在引入 requestAnimationFrame 之前，使用不指定時間的 setTimeout 經常用於類似的目的，儘管它遠沒有那麼有用（只是聊勝於無）。

此函數將您的程式碼排隊到一個特殊的堆疊中。就在渲染新幀（重繪）之前，瀏覽器會執行此排隊的程式碼。它非常適合對 DOM、HTML 或 CSS 進行更改（只有那些，請，我禁止您在那裡進行計算！）。

真正的多線程選項

雖然本文與它們無關，但值得一提的是，您可以透過利用 Web Workers 和 WebAssembly 來實現真正的多執行緒操作。這些允許您在後台執行緒中運行腳本。它們無法直接操作 DOM，但對於處理繁重的任務（矩陣計算，有人嗎？）來說它們非常寶貴。這種方法經常用於基於 HTML5 的遊戲 - 更複雜的遊戲，而不僅僅是井字遊戲。

最後的話

JavaScript 在隔離時仍然是單執行緒的。但在現實世界中，它是一種在網頁瀏覽器的多執行緒環境中運行的解釋語言。如果您的口譯員向您提供幫助，請接受並使用它。

這篇文章涵蓋了許多內容——基礎知識、底層解釋等等。但這通常就是發展的方式——一切都是相互關聯的。這就是為什麼我喜歡看更廣闊的前景。有時，專注細節並不能解決問題。

---

非同步曾經帶給你調試惡夢嗎？
我當然有 - 幾年前，獲得有錯誤的堆疊並不是什麼大事。

以上是在 Javascript 中利用多執行緒 - 不是關於 WebWorkers 也不是 WebAssembly的詳細內容。更多資訊請關注PHP中文網其他相關文章！