H5 web workers

最新推荐文章于 2022-04-02 20:07:22 发布

抓住鼹鼠不撒手

最新推荐文章于 2022-04-02 20:07:22 发布

阅读量200

点赞数 1

分类专栏：知识点总结文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_51965698/article/details/120578370

版权

知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

抓住鼹鼠不撒手

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 web workers

H5 Web Workers（多线程）H5规范提供了js分线程的实现，取名为：web workers相关apiworkers：构造函数，加载分线程执行的js文件worker.prototype.onmessage：用于接收另一个线程的回调函数worker.prototype.postMessage：向另一个线程发送消息不足worker内代码不能操作DOM（更新UI）不能跨域加载JS不是每个浏览器都支持这个新性质介绍web workers是html5提供的一个j
复制链接

扫一扫