HTML5 Web Workers的JavaScript线程

忘记转换，本机视频，语义标记以及所有其他琐碎的HTML5废话； 自JavaScript以来，网络工作者是浏览器中最好的功能！ Web工作人员最终允许开发人员在单独的线程中运行正在进行的流程。

线程听起来很复杂，有些开发语言使它变得棘手，但是您会很高兴地听到JavaScript的实现很好并且W3C工作草案很稳定。 Web工作人员可带来巨大的客户端性能提升，但是在开始之前，需要注意一些事项……

网络工作者限制

Web Worker的运行独立于浏览器UI线程，因此他们无法访问JavaScript开发人员所了解和喜爱的许多功能。 主要限制是Web工作人员无法访问DOM。 他们无法阅读或修改HTML文档。 此外，您无法在页面内访问全局变量或JavaScript函数。 最后，对某些对象的访问受到限制，例如window.location属性是只读的。

但是，Web Worker可以使用标准的JavaScript数据类型，处理XMLHttpRequest（Ajax）调用，使用计时器，甚至可以导入其他Worker。 它们非常适合耗时的任务，例如分析大数据块，游戏AI逻辑， 光线跟踪等。

Web Worker浏览器支持

在撰写本文时，Firefox，Chrome，Safari和Opera的所有最新版本在某种程度上都支持Web worker。 猜猜缺少哪个浏览器？

毫不奇怪，任何版本的Internet Explorer中都没有实现Web Worker。 甚至IE9也不提供支持，但我怀疑/希望它将在最终版本中实现。 在此之前，您有三个选择：

• 忘记网络工作者再过一两年。
• 接受您的应用程序将在IE中中断。
• 实现您自己的Web Worker填充程序，该填充程序将基于基于计时器的伪线程或数组处理 。 并非在所有应用程序中都是可行或建议的。

什么是网络工作者？

网络工作者是在后台加载并执行的单个JavaScript文件。 有两种类型：

• 专用工人 ：这些工人链接到其创建者（加载该工人的脚本）。
• 共享工作者 ：允许来自相同域（somesite.com）的任何脚本与工作者进行通信。

今天，我们正在寻找敬业的网络工作者……

创建一个专用的Web Worker

要创建专用的Web工作程序，请将JavaScript文件名传递给Worker对象的新实例：

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

与专用的Web Worker进行通信

由于Web工作人员无法访问DOM或执行页面脚本中的功能，因此所有通信都通过事件接口进行处理。 网页脚本通过postMessage()方法传递单个数据参数，并通过onmessage事件处理程序接收返回的onmessage ，例如

pagescript.js：

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

// receive messages from web worker
worker.onmessage = function(e) {
	alert(e.data);
};

// send message to web worker
worker.postMessage("Jennifer");

Web Worker脚本通过其自己的onmessage事件处理程序和postMessage()方法相应地接收和发送数据：

thread1.js：

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

消息数据可以是字符串，数字，布尔值，数组，对象，空值或未定义。 在通信过程中，数据始终按值传递并进行序列化然后反序列化。

处理专用的Web Worker错误

Web Worker代码不太可能是完美的，并且逻辑错误可能是由页面脚本传递的数据引起的。 幸运的是，可以使用onerror事件处理程序捕获错误。 处理程序事件传递给具有3个属性的对象：

• filename ：导致错误的脚本名称；
• lineno ：发生错误的行号； 和
• 消息 ：错误的描述。

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工作人员……但是，我建议保持简单，直到浏览器赶上您的线程野心！

停止专用的Web Worker

可以使用close()方法停止Web工作线程，例如

thread1.js：

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

这将丢弃所有等待处理的任务，并防止其他事件排队。

这就是您专属的网络工作者所需要了解的全部内容。 在我的下一篇文章中，我们将讨论共享Web工作者-一个更复杂的野兽！

From: https://www.sitepoint.com/javascript-threading-html5-web-workers/