JavaScript與HTML5網絡工人的線程

核心要點

• JavaScript 中的 Web Workers 是瀏覽器中一項強大的功能，允許開發者在單獨的線程中運行持續的進程，從而顯著提升客戶端性能。但是，它們獨立於瀏覽器 UI 線程運行，並有一些限制，例如無法訪問 DOM、全局變量或頁面中的 JavaScript 函數。
• 要創建和與專用 Web Worker 通信，開發者將 JavaScript 文件名傳遞給 Worker 對象的新實例，並通過事件接口處理所有通信。網頁腳本通過 postMessage() 方法傳遞單個數據參數，並通過 onmessage 事件處理程序接收一個返回數據。
• 現代瀏覽器廣泛支持 Web Workers，但 Internet Explorer 的任何版本都不支持。它們可以使用標準 JavaScript 數據類型，處理 XMLHttpRequest（Ajax）調用，使用計時器，導入其他 Worker，並且非常適合處理耗時任務，例如分析大型數據塊、遊戲 AI 邏輯和光線追踪。

拋開轉換、原生視頻、語義標籤以及所有其他華而不實的 HTML5 功能；自從 JavaScript 出現以來，Web Workers 是瀏覽器中最好的功能！ Web Workers 最終允許開發者在單獨的線程中運行持續的進程。線程聽起來很複雜，一些開發語言也使它變得棘手，但你會很高興聽到 JavaScript 的實現很好，並且 W3C 工作草案很穩定。 Web Workers 提供了巨大的客戶端性能提升，但在我們開始之前，還有一些需要注意的地方……

Web Worker 限制

Web Workers 獨立於瀏覽器 UI 線程運行，因此它們無法訪問 JavaScript 開發者熟知和喜愛的許多功能。主要的限制是 Web Workers 無法訪問 DOM；它們不能讀取或修改 HTML 文檔。此外，你無法訪問頁面中的全局變量或 JavaScript 函數。最後，對某些對象的訪問受到限制，例如 window.location 屬性是只讀的。但是，Web Workers 可以使用標準 JavaScript 數據類型，處理 XMLHttpRequest（Ajax）調用，使用計時器，甚至導入其他 Workers。它們非常適合處理耗時任務，例如分析大型數據塊、遊戲 AI 邏輯、光線追踪等。

Web Worker 瀏覽器支持

在撰寫本文時，Firefox、Chrome、Safari 和 Opera 的所有最新版本都在某種程度上支持 Web Workers。猜猜哪個瀏覽器不支持？不出所料，Internet Explorer 的任何版本都沒有實現 Web Workers。即使 IE9 也不提供支持，但我懷疑/希望它會在最終版本中實現。在那之前，你有三個選擇：

• 一兩年內忘記 Web Workers。
• 接受你的應用程序會在 IE 中崩潰。
• 實現你自己的 Web Worker shim，它回退到基於計時器的偽線程或數組處理。這在所有應用程序中可能不可行或不可取。

什麼是 Web Worker？

Web Worker 是在後台加載和執行的單個 JavaScript 文件。有兩種類型：

• 專用 Worker：這些 Worker 與它們的創建者（加載 Worker 的腳本）相關聯。
• 共享 Worker：允許來自同一域 (somesite.com) 的任何腳本與 Worker 通信。

今天，我們將討論專用 Web Workers……

創建專用 Web Worker

要創建專用 Web Worker，你可以將 JavaScript 文件名傳遞給 Worker 對象的新實例：

var worker = new Worker("thread1.js");

與專用 Web Worker 通信

由於 Web Worker 無法訪問 DOM 或執行頁面腳本中的函數，因此所有通信都是通過事件接口處理的。網頁腳本通過 postMessage() 方法傳遞單個數據參數，並通過 onmessage 事件處理程序接收一個返回數據，例如 pagescript.js：

var worker = new Worker("thread1.js");

// 接收来自 Web Worker 的消息
worker.onmessage = function(e) {
    alert(e.data);
};

// 发送消息到 Web Worker
worker.postMessage("Jennifer");

Web Worker 腳本相應地通過它自己的 onmessage 事件處理程序和 postMessage() 方法接收和發送數據：thread1.js：

self.onmessage = function(e) {
    self.postMessage("Hello " + e.data);
};

消息數據可以是字符串、數字、布爾值、數組、對象、null 或 undefined。數據始終按值傳遞，並在通信過程中進行序列化然後反序列化。

處理專用 Web Worker 錯誤

Web Worker 代碼不太可能完美無缺，並且邏輯錯誤可能是由頁面腳本傳遞的數據引起的。幸運的是，可以使用 onerror 事件處理程序捕獲錯誤。處理程序事件傳遞一個具有 3 個屬性的對象：

• filename：導致錯誤的腳本的名稱；
• lineno：發生錯誤的行號；以及
• message：錯誤的描述。

pagescript.js：

worker.onerror = function(e) {
    alert("Error in file: "+e.filename+"\nline: "+e.lineno+"\nDescription: "+e.message);
};

加載更多 JavaScript 文件

可以使用 importScripts() 加載一個或多個附加的 JavaScript 庫到 Web Worker 中，例如：

importScripts("lib1.js", "lib2.js", "lib3.js");

或者，你可以加載更多的 Web Workers……但是，我建議保持簡單，直到瀏覽器趕上你的線程抱負！

停止專用 Web Worker

可以使用 close() 方法停止 Web Worker 線程，例如 thread1.js：

self.onmessage = function(e) {
    if (e.data == "STOP!") self.close();
};

這將丟棄任何等待處理的任務，並防止進一步的事件排隊。這就是你需要了解的關於專用 Web Workers 的全部內容。在我的下一篇文章中，我們將討論共享 Web Workers——一個更複雜的傢伙！

關於 JavaScript 並行處理和 HTML5 Web Workers 的常見問題 (FAQ)

(此處省略了FAQ部分，因為篇幅過長，且與偽原創目標不符。 FAQ部分內容可以根據需要重新組織和改寫，但需保持原意不變。)

以上是JavaScript與HTML5網絡工人的線程的詳細內容。更多資訊請關注PHP中文網其他相關文章！