多线程——webWorker
1、单线程与多线程区别：
单线程：前一个操作没做完，后一个没办法开始
多线程：可以同时进行多个操作
2、多线程：
好处：充分利用cpu资源
1.主线程：加载页面，渲染，css渲染，jsDOM树生成
2.由webWorker创建出，进行一些计算
3.子线程里面不能操作 DOM和BOM
4.子线程里面不能再去创建子线程
5.不能跨域
6.主线程和子线程之间数据不是共享，每次都是复制一份数据
主线程文件eg:
<script>
function fn(n){
if(n==1 || n==2){
return 1;
}else{
return fn(n-1)+fn(n-2);
}
}
window.onload=function (){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
oBtn1.onclick=function (){
alert(fn(48));
};
var oW=new Worker('fibo.js');//创建子进程
oBtn2.onclick=function (){
oW.postMessage(48); //向子进程传输数据
oW.onmessage=function (ev){//接收子进程传来的数据
alert(ev.data);
};
};
oBtn3.onclick=function (){
oW.terminate();//结束子线程
};
};
</script>
</head>
<body>
<input type="button" value="点击测试" />
<input type="button" value="主线程测试" id="btn1" />
<input type="button" value="子线程测试" id="btn2" />
<input type="button" value="结束子线程" id="btn3" />
</body>
子进程文件eg：
function fn(n){
if(n==1 || n==2){
return 1;
}else{
return fn(n-1)+fn(n-2);
}
}
this.onmessage=function (ev){//子进程接收父进程的数据
this.postMessage(fn(ev.data));//子进程向父进程传输数据
};
网友评论