vue3 引入workers 大量优化业务代码和复杂的计算的代码
前沿
vite 页面引入worker
在src 新建一个 worker.d.ts 文件
declare module '*.worker.ts' { class WebpackWorker extends Worker { constructor(); } export default WebpackWorker; }
在 tsconfig.json 页面引入
"lib": ["esnext", "dom", "dom.iterable", "scripthost", "WebWorker"],
最后新建 work 文件夹
export {}; const getCounter = (params: any) => { console.log(params); const start = new Date().getTime(); console.log('开始计算斐波那契数任务'); let count = 0; // 1e9 const newArr = []; for (let i = 0; i < 1e9; i++) { count += i; } const end = new Date().getTime(); console.log('继续主线程,耗时:', end - start); postMessage(count); }; onmessage = function (event) { const { data } = event; const { type, params } = event.data; console.log(params); if (type === 'start') { getCounter(params); } if (data === 'stop') { postMessage('ended'); } console.log(event.data); };
最后在你需要的页面引入 头部(vue3 cli )
const worker = new Worker(new URL('@/workers/scan.worker.ts?worker', import.meta.url));
在vite 里面可以直接引入
import MyWorker from "@/utils/workers/workers.ts?worker"
下面的逻辑就是接受那边的数据
onMounted(() => { console.log(worker); worker.postMessage( { type: 'start', params: { name: 1 }, }); // set up an onmessage listener on Countdown worker object to listen to updates from the worker thread worker.onmessage = (e: any) => { console.log(e.data); // check if the counter value sent by the worker is divisible by 10, and if it is, call the getDogImage method again // if (counter.value % 10 === 0) { // getDogImage(); // } }; worker.onerror = (e: any) => { console.log(e); }; });
worker.onmessage 方法就是可以接受那边的处理完的数据 当然也可以不需要接受
缺点: 不能操作dom,
优点: 性能优化大大优化
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
2018-04-28 判断一个对象是否为空? js