如何在HTML5中使用JavaScript共享的網絡工人

態我們最近討論了JavaScript網絡工作者 參考“專用”品種。如果您還沒有閱讀，我建議您首先這樣做 - 本文以相同的概念為基礎。 簡而言之的網絡工人

Web Worker是在單獨線程上加載並執行的單個JavaScript文件。專門的網絡工作者鏈接到他們的創建者（加載工人的腳本）。共享的網絡工作人員允許任意數量的腳本與單個工人進行通信。 共享的Web工作人員遵守與專用對應物相同的規則：沒有DOM，文檔或頁面腳本訪問，並且對大多數窗口屬性的讀取權限有限。此外，頁面腳本只能與來自相同原點/域（somesite.com）的共享網絡工作者進行通信。 目前，Chrome，Safari和Opera都支持共享的網絡工人。 Firefox 4和IE9支持可能會到來，但不要押注。共享工人可以節省資源，但增加了額外的複雜程度。期待一些問題，例如

> dom2 Events（AddeventListener）處理程序似乎是最可靠的實現。
• >
>您幾乎可以肯定會遇到特定於瀏覽器的怪癖，並且調試很困難。以下代碼在最新版本的Chrome中起作用，但不要以為它可以在Safari或Opera中起作用。
• >

創建共享的Web Worker

要創建共享的Web Worker，請將JavaScript文件名傳遞給共享工作者對象的新實例：

var worker = new SharedWorker("jsworker.js");

>與共享的Web Worker進行溝通

您的任何頁面腳本都可以與共享的Web Worker通信。與專用的網絡工作者不同，您必須通過“端口”對象進行通信並附加消息事件處理程序。此外，您必須調用端口的開始（） 使用第一個postmessage（）之前的方法： pagescript.js：

當Web Worker腳本從腳本接收第一條消息時，它必須將事件處理程序附加到活動端口。在大多數情況下，處理程序將運行自己的Postmessage（）方法，以將消息返回到調用代碼。最後，還必須執行端口的啟動（）方法以啟用消息傳遞： jsworker.js：

var worker = new SharedWorker("jsworker.js");

worker.port.addEventListener("message", function(e) {
	alert(e.data);
}, false);

worker.port.start();

// post a message to the shared web worker
worker.port.postMessage("Alyssa");

像他們專門的兄弟姐妹一樣，共享的網絡工人可以：

var connections = 0; // count active connections

self.addEventListener("connect", function (e) {

	var port = e.ports[0];
	connections++;

	port.addEventListener("message", function (e) {
		port.postMessage("Hello " + e.data + " (port #" + connections + ")");
	}, false);

	port.start();

}, false);

>用importscripts（）
• 加載更多腳本
附加錯誤處理程序，
>運行port.close（）方法，以防止在特定端口上進行進一步的通信。 >

共享的網絡工人可能會在幾年內成為一項可行的技術，但他們為JavaScript開發的未來帶來了令人興奮的機會。希望瀏覽器供應商可以提供一些不錯的跟踪和調試工具！

>關於JavaScript共享網絡工作者的常見問題（常見問題解答）

>在JavaScript中，共享工人和網絡工人之間的主要區別是什麼？ Web工作人員僅限於創建其創建標籤的範圍。它無法與其他標籤或窗口通信。另一方面，可以從多個腳本訪問共享工人，即使是在不同的選項卡，窗口或iframe上運行的工人，只要它們在同一域中。這使得共享工人非常適合需要在不同的瀏覽器上下文之間進行數據共享和通信的任務。

如何在JavaScript中創建共享工作者？

>在JavaScript中創建一個共享的工人涉及實例化共享工作人員對象。這是一個簡單的示例：

var mysharedworker = new sharedWorker（'worker.js'）;
在此示例中，'worker.js'是共享工作者將執行的腳本。重要的是要注意，由於相同的原始策略限制，該腳本必須與創建共享工人的腳本在同一域上。
>
我如何使用共享工作者進行通信？後郵政方法用於將消息發送給共享工作者，而onMessage事件處理程序則用於從中接收消息。以下是一個示例：

//向共享的worker

mysharedworker.port.postmessage發送消息（'Hello，worker！'）;

//從共享的工人
mysharedworker.porter.porter.port.port.onmessage.onmessage.onmessage = function（E）{e） e.data）;
};

>共享工人可以在不同的瀏覽器選項卡之間共享數據嗎？

是的，共享工人的關鍵特徵之一是他們在不同的瀏覽器選項卡，Windows，Windows或IFRAMES之間共享數據的能力。這是可能的，因為來自同一域中的所有腳本都可以訪問相同的共享工作者實例。這使得共享工人非常適合需要在多個標籤或窗口上進行實時更新的任務，例如協作編輯應用程序或多名tab遊戲。

>是所有瀏覽器中支持的共享工人？但是，Internet Explorer不支持它們。在網站上查看最新的瀏覽器兼容性信息總是一個好主意，例如我可以使用或MDN Web Docs。

>如何處理共享工人中的錯誤？

>共享工人具有“ OnError”事件處理程序，可用於捕獲和處理執行過程中發生的任何錯誤。以下是一個示例：

mySharedworker.onerror = function（e）{
console.log（'發生錯誤：'e.message）;
};

};

共享工人可以做出AJAX請求嗎？他們可以訪問XMLHTTPREQUEST對象，該對象可用於向服務器發出異步請求。這允許共享的工人從服務器獲取數據而無需阻止主線程，改善您的Web應用程序的性能。

可以共享的工人使用Websockets嗎？ 可以共享的工人訪問DOM？

不，共享的工人無法直接訪問DOM。這是因為它們在單獨的線程中運行，並且無法訪問與主線程相同的範圍。但是，他們可以將消息發送到主線程，然後可以基於這些消息來更新DOM。

如何終止共享的工作者？
>可以通過在共享工作人員對像上調用“終止”方法來終止共享工人。但是，重要的是要注意，這將立即終止共享工人，無論它是否完成了當前的任務。以下是一個示例：

mySharedworker.terminate（）;

這將立即終止共享工人。通常，如果不再需要或引起績效問題，則僅終止共享工人是一個好主意。 >

以上是如何在HTML5中使用JavaScript共享的網絡工人的詳細內容。更多資訊請關注PHP中文網其他相關文章！