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);
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 名称 libev - 一个 C 编写的功能全面的高性能事件循环。 概要 示例程序 关于 libev Libev 是...
    hanpfei阅读 15,416评论 0 5
  • html5 多线程ajax是单线程主线程:主要是DOM 改动 css渲染 js 特效子线程 :计算创建子线程var...
    嘬烟盒的程序员阅读 1,293评论 1 1
  • 打开笔记本,原本只是照例写一篇文章,突然意识到今天是2016年的最后一天了,在养育孩子方面也要给自己一篇年终总结。...
    陈力石阅读 285评论 1 2
  • 《太空旅客》讲述的是男主角在一架载有5000明名人类前往殖民星球旅途中,遭遇陨石撞击导致休眠仓提前90年打开。他想...
    静宝sz阅读 467评论 3 0
  • 大雨忽然而至 也像早有预谋 我想要写一首诗 已经是五月的尾巴了 可是可是 雨还没有停……
    ayaQ的小世界阅读 188评论 0 0