Web Workers
引入
H5规范提供了js分线程的实现，取名为Web Workers他是HTML5提供的一个JavaScript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面 但是子线程完全受主线程控制，且不得操作DOM,所以这个新标准并没有改变JavaScript单线程的本质
相关API
1.Worker:构造函数，加载分线程执行的js文件
2.Worker.prototype.onmessage:用于接受另一个线程的回调函数
3.WorKer.prototype.postMessage:向另一个线程发送消息
**不足 **
worker内代码不能操作DOM 不能跨域加载JS 不是每个浏览器都支持这个新特性
var input = document.getElementById('number')
function computed(n){
return n<=2 ? 1:computed(n-1) + computed(n-2) //递归调用
}
document.getElementById('btn').onclick = function(){
var number = input.value
var result = computed(number)
alert(result)
}上面代码当按钮被点击时根据用户输入的值进行斐波拉契数列的计算
当这个值较大时，由于递归导致页面要很长时间才能响应，在等待响应的过程中由于js的单线程机制导致我们不能进行任何操作，页面就像被卡死了一样，如果要解决这个问题，可以用 web Wokers实现
将计算的逻辑交给分线程执行，这样在计算的过程中我们可以正常操作页面
//index.html
var input = document.getElementById('number')
document.getElementById('btn').onclick = function(){
var number = input.value
//创建一个worker对象
var worker = new Worker('./js/worker.js')
console.log(worker)
//向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据：'+number)
//绑定接受消息的监听
worker.onmessage = function(event){
console.log('主线程接受分线程返回的数据：'+event.data)
}
}//worker.js
function computed(n){
return n<=2 ? 1:computed(n-1) + computed(n-2) //递归调用
}
var onmessage = function(event){
var number = event.data
console.log('分线程接受主线程发送的数据：'+number)
//计算
var result = computed(number)
postMessage(result)
console.log('分线程向主线程返回数据：'+number)
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录