Javascript Web Worker使用过程解析

什么是Web Worker?

Web Workers是HTML5提出的一项新技术，它是一种运行在后台线程的JavaScript，它允许长时间运行的脚本或计算任务不会影响用户界面的性能或响应性。也就是说，JavaScript代码的处理可以交由浏览器的后台线程中处理，以便在不影响主线程UI的情况下，加速运算、提升页面的流畅度等。

Web Worker的使用

在使用Web Worker时，需要新建一个Worker对象，将要运行的脚本文件名作为参数传递给它，并且Web Worker所执行的脚本文件必须是与主线程加载的脚本文件同源的。

Web Worker涉及到主线程和子线程之间的通信问题，主线程和子线程都是运行JavaScript的环境，但是在执行的环境上存在区别。主进程是在主线程执行任务，而Web Worker在另外一个线程上（在主线程之外）运行JavaScript任务。

主线程创建子线程后，需要用postMessage()方法和onmessage事件进行通信。父子线程之间的信息交互并不是通过直接共享变量实现的，所以需要通过postMessage()和onmessage事件来传值。

创建Worker对象

Web Worker的创建是通过Worker对象实现的，语法为:

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

在创建Worker对象时，可以接受一个URL指向一个Worker文件，该文件以.worker.js作为文件后缀名。也可以使用Blob对象或base64数据传递JavaScript代码进行创建。

在这个简单的示例中，我们创建一个worker.js文件并将其放置在与HTML文件同目录下。这个文件非常简单，只是将文本消息返回到主线程。

self.addEventListener('message', function(e) {
    self.postMessage('You said: ' + e.data);
}, false);

接下来在页面中创建一个Worker对象：

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

向Worker对象发送消息

主线程通过postMessage()方法与子线程通信，该方法接收一个json对象作为参数。

在这个示例中，我们使用一个按钮，单击时将输入字段的内容发送到worker.js文件：

<input type="text" id="message" placeholder="Enter a message">
<button id="sendBtn">Send</button>

JavaScript代码如下：

var sendBtn = document.getElementById('sendBtn');
var messageInput = document.getElementById('message');
sendBtn.onclick = function() {
  myWorker.postMessage(messageInput.value);
  console.log('Message sent to worker');
}

从Worker对象接收消息

当Worker对象从主线程中接收到信息时，会触发onmessage事件，通过该事件中的data属性可以获取发送过来的数据。

看看这个示例，在响应onmessage事件时，我们将收到的消息添加到页面上的结果区域中：

<div id="result"></div>

JavaScript代码如下：

myWorker.onmessage = function(e) {
  console.log('Message received from worker');
  var resultEle = document.getElementById('result');
  resultEle.innerHTML += '<p>' + e.data + '</p>';
}

至此，我们已经成功地发送一条消息给Worker对象，并从Worker对象中回传了一条文本消息，这个过程通过Web Worker实现，而且我们看到，这个过程没有让页面卡顿或者打断了其他的事件响应。