HTML 5 Web Workers

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

/*--------------worker.js---------------*/

//计算斐波那契
function fibonacci(num){
    if(!num)   return 0;
    return num==1?1:fibonacci(num-1)+fibonacci(num-2);
}
var onmessage=function(e){
    var number=e.data;
    console.log('分线程接收到主线程数据：'+number);
    //计算结果
    var res=fibonacci(number);
    //返回数据
    postMessage(res);
    console.log('分线程返回数据到主线程：'+res);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>workers多线程</title>
</head>
<body>
    <input type="number" id="input">
    <button id="btn">计算斐波那契项</button>
    <script>
        var input=document.getElementById('input');
        var btn=document.getElementById('btn');

        //绑定点击事件
        btn.οnclick=function(){
            var number=input.value;
            //创建Worker对象
            var worker=new Worker('worker.js');
            //向分线程发数据
            worker.postMessage(number);
            console.log('向分线程发数据：'+number);
            //绑定监听函数
            worker.onmessage=function(e){
                console.log('主线程接收分线程返回数据：'+event.data);
                console.log(e);
            }
        }
    </script>
</body>
</html>

 

posted @ 2020-03-23 20:55  aeipyuan  阅读(96)  评论(0)  编辑  收藏  举报