JavaScript 中 web worker 如何使用？又有哪些限制？

Web Worker

1、什么是 web worker？有哪些好处？有哪些问题？

Web Worker 就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

好处：

好处就是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

问题：

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

2、使用 web worker 有哪些限制？

1. 同源限制

分配给 worker 的脚本文件，必须与主线程脚本文件同源。

2. DOM 限制

worker 线程无法读取主线程所在网页的 DOM 对象，无法使用 document、window、parent 这些对象，可以使用 navigator 和 location 对象。

3. 通信限制

worker 线程和主线程不再同一个上下文环境中，不能直接通信，必须通过消息完成。

4. 脚本限制

worker 线程不能执行 alert 方法和 confirm 方法，但是可以发出 ajax 请求。

5. 文件限制

worker 线程无法读取本地文件，不能打开文件系统，所加载的脚本，必须来自网络，不能是 file:// 文件。

3、worker 线程怎样监听主线程的消息的？如何发送消息的？worker 线程又是如何关闭的？

Worker 线程内部需要有一个监听函数，监听 message 事件。

// 监听
self.addEventListener('message', function (e) {
  // 发送消息
  self.postMessage('You said: ' + e.data);
}, false);

关闭 worker 线程

1）主线程关闭 worker 线程

worker.terminate()

2）worker 线程关闭

self.close()

4、worker 线程如何加载其他脚本？

importScript('scripts.js')
importScript('scripts1.js', 'scripts2.js')

5、主线程和 worker 线程的 API

主线程	worker 线程
Worker.onerror：指定 error 事件的监听函数	self.name： Worker 的名字
Worker.onmessage：指定 message 事件的监听函数	self.onmessage：指定 message 事件的监听函数
Worker.onmessageerror：指定 messageerror 事件的监听函数	self.onmessageerror：指定 messageerror 事件的监听函数
Worker.postMessage()：向 Worker 线程发送消息	self.close()：关闭 Worker 线程
Worker.terminate()：立即终止 Worker 线程	self.postMessage()：向产生这个 Worker 线程发送消息
	self.importScripts()：加载 JS 脚本

参考资料

• MDN Web Workers