JS多线程

摘要：本文主要学习了如何使用Web Work实现JS多线程的功能。

1 简介

在JavaScript中采用的是单线程机制，不需要考虑复杂的同步问题，但也无法同时处理两件任务，无法发挥计算能力。

为了满足多线程的需求，H5规范提供了JavaScript多线程的实现，这种技术称为Web Work。

Web Work的作用就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者在后台运行，主线程和Worker线程互不干扰，在Worker线程执行结束后会将结果返回给主线程。

Worker线程一旦创建成功就会运行，并且不会被主线程的交互动作打断，虽然有利于响应主线程的操作，但是长时间运行也会导致CPU资源的浪费，所以需要在使用后及时关闭Worker线程。

相比较在主线程执行函数，使用分线程函数会慢一些。分线程的优势是可以在不阻塞主线程的情况下，执行函数。

此外，使用Worker线程还有一些限制：

• DOM限制，Worker线程和主线程的this对象不一样，无法使用window对象，以及alert()等方法，只能使用navigator对象和location对象。
• 通信限制，Worker线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
• 兼容限制，不是所有的浏览器都支持。
• 跨域限制，不支持跨域加载JavaScript文件。

即使通过Web Worker技术，也不能修改DOM，只有主线程可以修改，所以JavaScript单线程的本质并没有变化。

2 使用

在主线程中使用构造函数创建Worker分线程，传入执行的JavaScript文件：

1

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

在主线程中给Worker对象的onmessage属性绑定函数，用于接收Worker分线程的消息：

1
2
3

worker.onmessage = function (event) {
  console.log('主线程接收分线程返回的数据: ' + event.data);
}

在主线程中调用Worker对象的postMessage()方法，给Worker分线程传输参数：

1

worker.postMessage('I am main');

在分线程要执行的JavaScript文件中，使用onmessage属性接收主线程的信息，使用postMessage()方法给主线程传递结果：

1
2
3
4

var onmessage = function(event) {
  console.log('主线程接收分线程返回的数据: ' + event.data);
}
postMessage('I am worker');

在使用Worker分线程后，需要及时关闭：

• 可以在主线程调用Worker对象的terminate()方法关闭：

  1	worker.terminate();

• 在分线程要执行的JavaScript文件中调用close()方法关闭：

  1

  close();