随身笔记
随身笔记

javascript多线程的实现——web worker

Web Worker兼容ie10以上包括ie10    js 多线程

推荐先看关于进程和线程的关系:https://sdeno.com/?p=6455

背景介绍:
js是单线程,在执行js的代码时,总要等待其他代码执行完毕后才能去执行其他代码,所有任务只能在一个线程上完成,一次只能做一件事
。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥
计算机的计算能力。

Web Worker作用就是为js创建子线程,js主线程负责UI交互,子线程负责密集型运算,两线程同时运行互不影响避免阻塞,最终子线程在把
数据结果返回给主线程。

 

案例:

<script>
 var worker = new Worker('./js/a.js'); //创建一个子进程
 worker.postMessage({num:1}); //数据传给子线程

 worker.onmessage = function (event) { //接收子进程返回的数据
   console.log('这里接收子线程返回的数据:' + event.data);
   worker.terminate();  //执行完毕关闭
 }
 </script>

 

// a.js  ,子进程

self.addEventListener('message', function (e) {
  self.postMessage('这里是子线程的数据=' + e.data.num); //里面的数据返回给主线程
  self.close(); //子进程执行完毕时关闭
}, false);

 

在线案例:demo

 

Web Worker特性:

1,Worker 子线程一旦新建成功,就会不停的循环的执行。要记得关闭

// 关闭主线程
worker.terminate();

// 关闭Worker 子线程
self.close();

2,同源策略
new Worker(‘./js/a.js’)在加载脚本时不要涉及到跨域,必须与主线程的脚本文件同源。

3,DOM限制

Worker子线程只能访问,navigator对象和location。不能操作DOM对象

 

4,方法限制
Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

5,文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

 

Worker 子线程内部加载脚本

importScripts('script1.js', 'script2.js');

 

主线程监听Worker报错回调

worker.addEventListener('error', function (event) {
 // ...
});

Worker 内部也可以监听error事件。

 

http://www.ruanyifeng.com/blog/2018/07/web-worker.html

其他案例:https://www.cnblogs.com/peakleo/p/6218823.html

 

没有标签
首页      前端资源      wordpress教程      javascript多线程的实现——web worker

随身笔记

javascript多线程的实现——web worker
Web Worker兼容ie10以上包括ie10    js 多线程 推荐先看关于进程和线程的关系:https://sdeno.com/?p=6455 背景介绍: js是单线程,在执行js的代码时,总要等待其他代码执行完毕后…
扫描二维码继续阅读
2018-10-15