前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vite使用WebWorker

Vite使用WebWorker

作者头像
愧怍
发布2022-12-27 20:39:28
1.6K0
发布2022-12-27 20:39:28
举报

准备给我的一个 Vite 项目进行重构,其中一个功能(函数)要花费 JS 主线程大量时间,会导致主线程画面卡死,无法正常点击,直到该功能(函数)执行完毕而言。这样的用户体验非常差,于是就准备使用 WebWorker 对该功能封装。

WebWorker 限制

(1)同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

(2)DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用documentwindowparent这些对象。但是,Worker 线程可以navigator对象和location对象。

(3)通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

(4)脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

(5)文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

综合以上限制,我所要重构的功能面临以下问题

  • 一些 window 下的函数,或者主线程下全局数据函数,无法共同
  • 无法读取本地文件,需要创建网络文件(如 Blob 或 Vite 导入)
  • Worker 线程和主线程通信要使用worker.postMessageself.addEventListener来发送与监听数据。

所以在考虑使用 Worker 的时候就要考虑这个功能是否值得使用 Worker,能否使用 Worker 实现

Vite 中使用 WebWorker

这里先给出我的最优解,在 Vite 中静态资源处理 ,其中可以导入脚本作为 Worker

main.js

代码语言:javascript
复制
import Worker from './test.worker.js?worker'
const worker = new Worker()

这个 worker 就是所要的 Worker 对象,接着就可以对象的 postMessage 与 onmessage 来数据通信,如

main.js

代码语言:javascript
复制
worker.onmessage = (e) => {
  console.log('main.js', e.data)
}

worker.postMessage('hello from main')

test.worker.js

代码语言:javascript
复制
self.addEventListener(
  'message',
  function (e) {
    console.log('test.worker.js', e.data)
    self.postMessage('hello from worker')
  },
  false,
)

不过 Vite 还有其他方式导入 Worker

代码语言:javascript
复制
const worker = new Worker(new URL('./worker.js', import.meta.url))

这种方式相对更加标准,但是如果worker并不是一个js文件,而是ts文件,并且还夹杂一些第三方的包,这种方式是有可能会失败,本人测试是这样的,所以推荐一开始的方式,也就是带有查询后缀的导入。

在打包的时候将其实所用到引入的依赖合并成一个文件,如果打开开发者工具,可以在源代码面板的右侧线程中看到主线程,以及worker线程。

参考文章

使用 Web Workers - Web API 接口参考 | MDN (mozilla.org)

Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年7月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • WebWorker 限制​
  • Vite 中使用 WebWorker​
  • 参考文章​
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档