H5 web workers

H5 Web Workers(多线程)

  1. H5规范提供了js分线程的实现,取名为:web workers

  2. 相关api

    • workers:构造函数,加载分线程执行的js文件
    • worker.prototype.onmessage:用于接收另一个线程的回调函数
    • worker.prototype.postMessage:向另一个线程发送消息
  3. 不足

    • 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);
}
上一篇:H5和CSS3的知识点梳理(46)


下一篇:23种设计模式之适配器模式(Adapter)