🀢

原理

使用 Web Workers 的基本原理如下：

在使用 Web Workers 时，必须建立一个 Worker 实例，并使用要被执行的 JavaScript 文件所在 URL 作为参数，而且必须把 Worker 要执行的 Javascript 程序写在如下的文件中：

✂️

var worker = new Worker('worker.js');

这样， worker.js 中的程序代码便开始运行了。每一个运行在客户端操作系统线程中的 JavaScript 程序代码称为一个 Worker ， worker.js 中的程序代码便是一个 Worker 。

主页面与 Worker 之间，只通过 postMessage() 方法与 onmessage 事件来沟通。 Worker 中的 postMessage() 方法用来向页面传送讯息，页面收到讯息时，则使用 onmessage 事件处理函数来处理。 onmessage 事件处理函数的参数中有一个 data 属性，用于携带传送的数据。

Web Workers 发生错误时，会触发 error 事件，使用 error 事件处理函数可以处理。

另外， Worker 对象还有一个方法叫做 terminate() ，可以强制结束其执行。

使用 Web Workers 入门

下面来看一下如何使用 Web Workers 实现求素数的复杂运算。往往包含以下两个步骤。

首先建立一个 JavaScript 文件

✂️

onmessage = function (e) {
  var n = e.data * 100;
  postMessage(n);
};

在 HTML 网页中创建 Worker ，并接收消息

✂️

html

<p>Prime found: <span id="state" style="background-color:#09F">0</span></p>
<script>
  var state = document.getElementById('state');
  if (window.Worker) {
    var worker = new Worker('213.js');
    worker.postMessage(2);
    worker.onmessage = event => (state.textContent = event.data);
  } else {
    alert(' 浏览器不支持 Web  Workers!');
  }
</script>

在浏览器中执行这个网页，现在求素数的 JavaScript 程序代码运行在客户端操作系统线程中。