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 脚本 |