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