• 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>
  • 相关阅读:
    一条代码快速解决滚动条隐藏问题
    微信小程序:wx:for循环输出的使用方法以及简单例子
    点运算符(.)和中括号运算符([])有哪些区别
    线程
    ArrayMap 和HashMap的区别
    Android加载图片的策略
    Android图片加载为什么选择glide
    Android 设计模式对比
    Android 注解框架对比
    ReactNative编写规范
  • 原文地址:https://www.cnblogs.com/aeipyuan/p/12638608.html
Copyright © 2020-2023  润新知