在使用SharedWorker时遇到通信不稳定的问题，原因是初始化时有异步操作，特别是import语句导致的动态获取翻译。由于worker与主线程并行执行，异步的fetch请求可能在onconnected事件触发前完成，引发bug。解决方案是将onconnected设置放在所有异步操作之前，确保正常通信。
之前做了个用到SharedWorker的项目，结果发现有时能正常通信，有时又无法通信，断点调试显示连onconnected都没进，排查半天，最后发现是一句简单的import导致的...
SharedWorker在设置onconnected之前，千万不要有异步操作！！！
问题就出在那个import，import的是翻译词典（因为需要多语言支持），被import的js里面用了navigator.languages检测用户的语言，然后动态获取对应翻译；
获取翻译时，使用了 await fetch （模块顶层可以直接await），导致出现了异步操作，又因为worker使用的是静态import，所以。。。
因为worker是独立的线程，它与主线程并行，各种奇奇怪怪的bug便出现了：
情况1： (开发环境更容易出现)worker里的await fetch先完成了加载（这是有可能的，本地运行服务器延迟很低），并在主线程的 new SharedWorker 返回前设置了onconnected处理，主线程紧随其后，调用了worker.port.start()，此时一切正常；
情况2：(生产环境更容易出现)主线程的new SharedWorker已经返回，并调用了port.start()；但是此时worker的await fetch还没有返回，顺理成章地，onconnected也没有设置
最低0.47元/天 解锁文章
2638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
