首页 > 其他分享> 文章详细

H5 web workers

2021-10-01 16:02:42 阅读：183 来源： 互联网

标签：web workers worker js 线程 H5

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

标签：web,workers,worker,js,线程,H5
来源： https://blog.csdn.net/qq_51965698/article/details/120578370

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

H5 web workers