cocos creator 中使用web worker

原创已于 2023-04-12 11:57:32 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-04-12 10:33:18 首次发布

文章讨论了如何使用WebWorkers在JavaScript的单线程环境中处理耗时操作，如web3解密，以避免阻塞主线程导致页面卡顿。通过创建Worker.js文件并在主线程中与之通信，可以将解密任务转移到后台执行，保持用户界面的交互性。

1.应用场景：一些阻塞线程的方法可以放到worker里面去执行，不影响主线程，避免页面卡顿。

啊，有人就会说了，setTimeout不就可以了吗，还有什么async...

JS本身就是单线程设计的，不管你是setTimeout还是async都只不过是调换了执行顺序而已。

Web Workers API - Web API 接口参考 | MDN

我为什么需要用到呢？因为我的web3解密需要大概1-5S，此时数据已经拿回来了，但是用户不能跟页面交互，因为解密还在进行中，此时就需要worker来帮我做这件事了。

再举个例子吧，你在上班，但是你的快递到了，如果要去拿，就只能等到下班再去了，但是你家人在家，你就可以让你家人去帮你做这件事，而且不影响你上班。。

1.新建一个Worker.js,然后写代码


importScripts('https://xxx.com/web3/web3.min.js');
self.onmessage = function(e) {
    console.log(e.data);//主线程推送来的消息
    const web3 = new Web3(Web3.givenProvider);
    const {privateKey,pin} = e.data
    const pk = JSON.parse(privateKey)
    let rp = web3.eth.accounts.decrypt(pk, pin)
    self.postMessage(rp.privateKey) //发送消息到主线程
}

2.在你的ts脚本里面(要在onload里面new Worker)，不然会报3817

3.主线程发消息到worker中

worker.postMessage({privateKey:'xxx',pin:'xxxx'})

4.把你的项目打包出来，然后把Worker.js拷贝到根目录下面

缺点就是调试比较麻烦