H5 Web Workers(多线程)
-
H5规范提供了js分线程的实现,取名为:web workers
-
相关api
- workers:构造函数,加载分线程执行的js文件
- worker.prototype.onmessage:用于接收另一个线程的回调函数
- worker.prototype.postMessage:向另一个线程发送消息
-
不足
- worker内代码不能操作DOM(更新UI)
- 不能跨域加载JS
- 不是每个浏览器都支持这个新性质
介绍
- web workers是html5提供的一个js多线程解决方案
- 我们可以讲一些大计算量的代码交由web workers运行而不冻结用户页面
- 但是子线程完全受主线程控制,且不得操作dom,所以这个新标准并没有改变js单线程的本质
使用
- 创建在分线程执行的js文件
- 在主线程中的js中发消息并设置回调
<body>
<input type="text" id="ipt">
<button id="btn">按钮</button>
<script>
btn.onclick=function(){
var number=ipt.value
//创建一个worker对象
var worker=new Worker('branch.js')
//向分线程发送消息
worker.postMessage(number)
//接受worker传过来的数据
worker.onmessage = function(event){
console.log('主线程接受分现场的返回数据:'+event.data);
}
}
</script>
</body>
function fibonacci(n){
return n<=2?1:fibonacci(n-1)+fibonacci(n-2)
}
var onmessage=function(event){
var number=event.data
console.log('分线程接受到主线程发送的数据:'+number);
//计算
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据:'+result);
}