美文网首页H5
H5(Web Workers)

H5(Web Workers)

作者: 强某某 | 来源:发表于2018-06-08 16:42 被阅读12次

    Web Workers

    • Worker:构造函数,加载分线程执行的js文件
    • Worker.prototype.onmessage: 用于接收另一个线程的回调函数
    • Worker.prototype.postMessage:向另一个线程发送消息
    • 缺点:worker内代码不能更新UI,不能跨域加载js,浏览器支持问题

    说明:必须在服务器环境下,不能本地file,加载的js不能跨域,使用webworker的代码不要使用
    箭头函数,let等新特性。

    案例

    html中的js
        var worker = new Worker('a.js');
        worker.postMessage(8);
        worker.onmessage = function (event) {
            console.log("接收的数据",event.data);
        }
    a.js
    // 斐波那契数列
    function fibonacci(n){
        return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
    }
    var onmessage = function(event) {
        let res=fibonacci(event.data);
        postMessage(res);
    }
    说明:之所以webworker代码中不能更新UI,是因为this指向是[object DedicatedWorkerGlobalScope],
    即a.js中上下文不是window,没有UI更新相关的接口。
    

    相关文章

      网友评论

        本文标题:H5(Web Workers)

        本文链接:https://www.haomeiwen.com/subject/oqmasftx.html