Web Worker
2020-11-26 本文已影响0人
TralafalgarV
作用
为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰;
Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭。
基本用法:
主线程通过new一个 Worker 对象,新建一个worker线程。
var worker = new Worker(‘http://xxxx_work.js'); // 脚本必须来自于网络,没有操作本地文件能力
- 主线程:
通过worker.postMessage
、worker.onmessage
来发送和接收来着子线程的消息;
worker.terminate(); // 杀掉子线程
- worker线程:
self.addEventListener('message', function (e) {
self.postMessage('You said: ' + e.data);
}, false);
通过addEventListener
来监听message
事件,e. data
包含主线程发来的数据;
self.close(); // 杀掉子线程
Worker内部加载其他脚本
有一个专门的方法importScripts()
importScripts('script1.js', 'script2.js'); // 可以加载多个
缺点
Web Worker是临时的,每次运行的结果不能持久的保持下来,下次有复杂的运算,还需要重新计算一次。为了解决这个问题,推出了Service Worker,相对于web worker增加了离线缓存能力。
限制
- 同源限制:与主线程脚本同源;
- DOM限制:无法读取主线程页面DOM对象;
- 通信联系:与主线程不在同一个上下文,无法直接通信,必须通过消息;
- 脚本限制:无法执行
alert()
、confirm()
方法,但可以发出AJAX; - 文件限制:无法操作本机文件系统;