什么是 Web Workers？

个人博客上线欢迎来访 http://www.zihanzy.com

引入

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)
}

个人博客上线欢迎来访 http://www.zihanzy.com