html5 多线程（判断js中的主线与支线的区别）

多线程好处:
1.子线程计算不会阻塞主线程
2.充分利用cpu

运用兔子数列判断主与支的区别与联系:主线程运转时，其余都不能动作，而子线程运算时，其余还可以运作。

2.png 1.png

兔子数列如下：

function fib(n){
if(n==1||n==2){
return 1;
}else{
return fib(n-1)+fib(n-2);
}
}

js单线程
主线程 ： DOM 改动 、css渲染、 js 特效；
子线程 ： 计算；
创建子线程：
var oW = new Worker('a.js');
oW.postMessage(值);
this.onmessage = function(ev){
console.log(ev.data);
};
this 子线程的全局对象
终止进程 terminate

function fib(n){  
  if(n==1||n==2){ 
       return 1;   
      }else{ 
       return fib(n-1)+fib(n-2);  
     }
}
document.addEventListener('DOMContentLoaded',function(){
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2'); 
    var oBtn3 = document.getElementById('btn3'); 
    var oBtn4 = document.getElementById('btn4'); 
    var oW;    
    oBtn1.onclick = function(){ 
       alert(fib(48));   
    }; 
    oBtn2.onclick = function(){ 
        oW = new Worker('fib.js');
        oW.postMessage(48);
        oW.onmessage = function(ev){
            alert(ev.data);       
        };    
   };   
   oBtn3.onclick = function(){
       oW.terminate(); 
   }; 
   oBtn4.onclick = function(){
        alert('点击了');
    };
},false);

<input type="button" value="主线程计算" id="btn1">
<input type="button" value="子线程计算"  id="btn2">
<input type="button" value="中断"  id="btn3">
<input type="button" value="测试" id="btn4">

fib.js

function fib(n){   
   if(n==1||n==2){   
         return 1;   
   }else{     
       return fib(n-1)+fib(n-2);     
   }
}
this.onmessage = function(ev){
      this.postMessage(fib(ev.data));
};

子线程 和主线程 数据不共享，复制一份给子线程

//开启了子线程
var arr = [12,5,8];
var oW = new Worker('d.js');//发送
oW.postMessage(arr);
oW.onmessage = function (ev) {
    alert(ev.data);//6,5,8
};
console.log(arr);//12,5,8

d.js

this.onmessage = function(ev){ 
     ev.data[0] = 666;  
    this.postMessage(ev.data);
};