html5 多线程
ajax是单线程
主线程：主要是DOM 改动 css渲染 js 特效
子线程 ：计算
创建子线程
var oW = new Worker('a.js');
oW.postMessage(值);
this.onmessage = function(ev){
console.log(ev.data);
};
this 子线程的全局对象
注意事情：
1.注意 不需要名字 oW.postMessage(值);
2.
子线程不能使用 DOM BOM
3. 不能跨域
4.子线程不能有子线程
5.子线程 和主线程 数据不共享，子线程就是子线程的值，主线程就是主线程的值
多线程好处
1.子线程计算不会阻塞主线程
2.充分利用cpu
现在就写一个兔子序列的例子来说明一切：
<script>
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);
</script>
</head>
<body>
<input type="button" value="主线程计算" id="btn1">
<input type="button" value="子线程计算" id="btn2">
<input type="button" value="中断" id="btn3">
<input type="button" value="测试" id="btn4">
</body>
</html>
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));
};
网友评论