Web Worker

作用

为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰;
Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭。

基本用法:

主线程通过new一个 Worker 对象,新建一个worker线程。

var worker = new Worker(‘http://xxxx_work.js');  // 脚本必须来自于网络,没有操作本地文件能力
  • 主线程:
    通过 worker.postMessageworker.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;
  • 文件限制:无法操作本机文件系统;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容