必威体育Betway必威体育官网
当前位置:首页 > IT技术

在单页应用中使用WebWork

时间:2019-11-03 23:43:22来源:IT技术作者:seo实验室小编阅读:52次「手机版」
 

webwork

在单页应用中使用WebWork


JS为了避免DOM渲染冲突,使用单线程运行代码。虽然浏览器通过事件循环队列延后处理耗时任务,但是在执行大量复杂运算时依然会使主线程卡顿,HTML5提出了WebWork允许用户另开线程来进行复杂的逻辑计算处理。

WebWork在html中使用方法:

1. 在index.html中新建worker对象,并发送及监听消息
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>WebWork</title>
    </head>
    <body> </body>
    <script>
        var work = new Worker('./work.js')
        work.postmessage(1000000000)
        work.onmessage = function(res){
            console.log("累加结果 : ",res.data)
        }
    </script>
    </html>

2. 新建work.js处理复杂逻辑
    onmessage = function(e){

        let sum = 0,num = e.data;
        for(var i=1;i<=num;i++){
            sum += i
        }
        postMessage(sum);
    }

如果通过浏览器直接打开本地index.html会报错:Failed to construct ‘Worker’: Script at ‘XXXX’ cannot be accessed from origin ‘null’.

可以通过http-server 搭建http服务后正常运行

React等单页应用中的使用方法:

在React,Vue等单页应用中Webpack将js代码都打包成一个js文件,故以上通过new Worker(’./work.js’)方式新建worker将会报访问不到worker.js的错误。

*方案 1. 将worker.js放入public等可以直接http访问的静态资源文件夹下面,注意是不支持跨域访问的。

*方案 2. 使用第三方插件例如react-webworker,npm地址:点击这里

*方案 3 (推荐). 利用Blob新建本地临时文件,通过URL.createObjectURL()创建对blob对象的URL引用,这些URL只能在浏览器的单个实例中和同一个会话中使用。

1. 封装worker.js
export default class WebWorker {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob(["(" + code + ")()"]);
    return new Worker(URL.createObjectURL(blob));
  }
}
2. 在React中和Vue中使用相似,以react为例:
    import WebWorker from './worker.js'
    ...

    componentDidmount(){
        let work = function(){
            self.onmessage = function(e){
                let sum = 0,num = e.data;
                for(var i=1;i<=num;i++){
                    sum += i
                }
                postMessage(sum);
            }
        }
        this.worker = new WebWorker(work)
        this.worker.onmessage = function(res){
            console.log("累加结果 : ",res.data)
        }
    }
    someEvent(){
        this.worker.postMessage(1000000000)
    }

WebWork新开线程存在以下问题:1. work中不能访问及操作dom, 2. 新开WebWork线程会有一定的系统开销

有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

文章最后发布于: 2019-03-19 10:05:18

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读