文章目录前言为什么需要多线程Worker vs TaskPoolWorker 创建与通信耗时计算实战线程间数据传递序列化线程池管理写在最后前言你有没有遇到过这种情况列表页加载 5000 条数据排序逻辑一跑整个页面直接冻住用户疯狂点击屏幕没反应心想这 App 怎么跟死机了一样。根本原因就是耗时任务占了主线程UI 没机会刷新。解决方案很简单——把耗时任务扔到子线程去跑Worker 就是干这个的。JavaScript 天生是单线程的ArkTS 也没逃掉这个基因。但 HarmonyOS7 给了两个多线程方案Worker 和 TaskPool。TaskPool 用起来更简单但 Worker 更灵活、更适合长任务。说实话如果你只是想跑个简单计算TaskPool 够用了。但如果你的任务要跑几十分钟、需要维护状态、要跟主线程频繁通信——Worker 才是正解。今天重点聊 Worker。为什么需要多线程主线程只有一个职责刷新 UI。所有用户能看到的东西都在主线程上渲染。一旦你在主线程干重活——大量计算、文件读写、JSON 解析大对象——UI 就卡了。而且 HarmonyOS 对主线程有超时检测阻塞超过一定时间直接 ANR应用无响应。所以规则很简单跟 UI 无关的活统统扔到子线程。Worker vs TaskPool很多人分不清这俩先来张对比表维度WorkerTaskPool线程生命周期开发者手动管理系统自动管理任务粒度整个线程级别单个任务级别长任务支持✅ 可以跑几小时❌ 超过 3 分钟会被系统回收状态维护✅ 线程内可以维护持久状态❌ 任务结束状态就没了优先级控制✅ API 18 支持✅ 支持任务取消需自己实现✅ 原生支持cancel()负载均衡❌ 手动管理✅ 自动扩缩容创建开销较大需要新建线程小复用线程池通信方式postMessage/onmessage任务返回值一句话总结短任务用 TaskPool长任务用 Worker。不确定就用 TaskPool省心。Worker 创建与通信Worker 的通信模型就是经典的Actor 模型——主线程和 Worker 线程内存完全隔离只能通过postMessage互发消息。先看主线程怎么创建 Worker 并收发消息import{worker,MessageEvents}fromkit.ArkTS;EntryComponentstruct WorkerDemo{Stateresult:string等待计算...privateworkerInstance:worker.ThreadWorker|nullnullaboutToAppear(){this.workerInstancenewworker.ThreadWorker(entry/ets/workers/ComputeWorker.ts)this.workerInstance.onmessage(e:MessageEvents){this.result计算结果:${e.data.result}}this.workerInstance.onerror(e:ErrorEvent){console.error(Worker 出错:${e.message})}}startCompute(){if(this.workerInstance){this.workerInstance.postMessage({action:compute,data:1000})}}aboutToDisappear(){this.workerInstance?.terminate()this.workerInstancenull}build(){Column(){Text(this.result).fontSize(20)Button(开始计算).onClick(()this.startCompute())}}}再看 Worker 线程那边的代码entry/ets/workers/ComputeWorker.tsimport{worker,ThreadWorkerGlobalScope,MessageEvents}fromkit.ArkTS;letworkerPort:ThreadWorkerGlobalScopeworker.workerPort;workerPort.onmessage(e:MessageEvents){if(e.data.actioncompute){letnum:numbere.data.dataasnumberletresult:number0for(leti0;inum;i){resulti}workerPort.postMessage({result:result})}}workerPort.onerror(e:ErrorEvent){console.error(Worker 内部错误:${e.message})}关键代码讲解new worker.ThreadWorker(entry/ets/workers/ComputeWorker.ts)—— 主线程创建 Worker参数是 Worker 脚本的相对路径路径写错直接报错worker.workerPort—— Worker 线程侧的通信端口必须定义在顶层作用域不能用constpostMessage()—— 发送消息数据会被序列化后传递onmessage—— 接收消息的回调e.data就是对方发过来的数据terminate()—— 主线程主动销毁 Worker组件销毁时一定要调否则线程泄漏耗时计算实战来个真实的场景图片灰度处理。一张 1920×1080 的图片有 200 万像素主线程处理直接卡死。import{worker,MessageEvents}fromkit.ArkTS;import{image}fromkit.ImageKit;EntryComponentstruct ImageProcessPage{StatesrcPixelMap:PixelMap|nullnullStateprocessedPixelMap:PixelMap|nullnullprivateworkerInstance:worker.ThreadWorker|nullnullaboutToAppear(){this.workerInstancenewworker.ThreadWorker(entry/ets/workers/GrayWorker.ts)this.workerInstance.onmessage(e:MessageEvents){if(e.data.typeprogress){console.info(处理进度:${e.data.percent}%)}if(e.data.typedone){letbuffere.data.bufferasArrayBuffer image.createPixelMap(buffer,{size:{width:e.data.width,height:e.data.height},pixelFormat:4,alphaType:0}).then((pixelMap:PixelMap){this.processedPixelMappixelMap})}}}asyncprocessImage(){if(!this.srcPixelMap||!this.workerInstance)returnletimageInfoawaitthis.srcPixelMap.getImageInfo()letwidthimageInfo.size.widthletheightimageInfo.size.heightletbuffernewArrayBuffer(width*height*4)awaitthis.srcPixelMap.readPixelsToBuffer(buffer)this.workerInstance.postMessage({type:gray,buffer:buffer,width:width,height:height})}aboutToDisappear(){this.workerInstance?.terminate()this.workerInstancenull}build(){Column(){Row(){Image(this.srcPixelMap).width(45%)Image(this.processedPixelMap).width(45%)}Button(灰度处理).onClick(()this.processImage())}}}Worker 端灰度处理逻辑import{worker,ThreadWorkerGlobalScope,MessageEvents}fromkit.ArkTS;letworkerPort:ThreadWorkerGlobalScopeworker.workerPort;workerPort.onmessage(e:MessageEvents){if(e.data.typegray){letbuffere.data.bufferasArrayBufferletdatanewUint8Array(buffer)letwidthe.data.widthasnumberletheighte.data.heightasnumberlettotalwidth*heightfor(leti0;itotal;i){letoffseti*4letrdata[offset]letgdata[offset1]letbdata[offset2]letgrayMath.floor(0.299*r0.587*g0.114*b)data[offset]gray data[offset1]gray data[offset2]grayif(i%500000){workerPort.postMessage({type:progress,percent:Math.floor((i/total)*100)})}}workerPort.postMessage({type:done,buffer:buffer,width:width,height:height})}}关键代码讲解readPixelsToBuffer(buffer)—— 把 PixelMap 的像素数据读到 ArrayBuffer这个 buffer 可以跨线程传递new Uint8Array(buffer)—— Worker 端用 Uint8Array 视图操作像素数据每 4 字节一组RGBA灰度算法0.299R 0.587G 0.114B—— 经典的加权灰度公式符合人眼对绿色更敏感的特性中间穿插的progress消息 —— 让主线程知道处理进度可以显示进度条ArrayBuffer 是可转移对象传给 Worker 后主线程就不能再访问了Worker 处理完需要传回来线程间数据传递序列化Worker 通信基于结构化克隆算法不是所有数据都能传。来理清楚✅ 可以直接传递的基本类型string、number、booleanArrayBuffer、TypedArray普通对象plain object数组❌ 不能直接传递的函数带原型链的对象class 实例DOM 对象用State、Observed修饰的复杂类型如果你需要传 class 实例手动序列化成普通对象再传interfaceUserData{name:stringage:number}classUser{name:stringage:number0toJSON():UserData{return{name:this.name,age:this.age}}}letusernewUser()user.name鸿蒙user.age3this.workerInstance.postMessage(user.toJSON())线程池管理单个 Worker 好搞但如果你需要同时处理多个任务呢比如图片列表要并发压缩总不能每张图建一个 Worker 吧。简单实现一个 Worker 池import{worker,MessageEvents}fromkit.ArkTS;classWorkerPool{privateworkers:worker.ThreadWorker[][]privatetaskQueue:{action:string;data:Object;resolve:Function}[][]privatebusySet:SetnumbernewSet()privatemaxSize:number4constructor(){for(leti0;ithis.maxSize;i){letwnewworker.ThreadWorker(entry/ets/workers/PoolWorker.ts)letindexi w.onmessage(e:MessageEvents){this.busySet.delete(index)this.processQueue()}this.workers.push(w)}}execute(action:string,data:Object):PromiseObject{returnnewPromise((resolve){this.taskQueue.push({action,data,resolve})this.processQueue()})}privateprocessQueue(){while(this.taskQueue.length0){letidleIndexthis.findIdleWorker()if(idleIndex-1)breaklettaskthis.taskQueue.shift()!this.busySet.add(idleIndex)this.workers[idleIndex].postMessage({action:task.action,data:task.data})}}privatefindIdleWorker():number{for(leti0;ithis.workers.length;i){if(!this.busySet.has(i))returni}return-1}destroy(){this.workers.forEach(ww.terminate())this.workers[]}}关键代码讲解maxSize: 4—— 最多 4 个 Worker 并发别开太多线程本身有内存开销taskQueue—— 任务队列Worker 忙不过来时先排队busySet—— 记录哪些 Worker 在忙processQueue每次找空闲 Worker 分配任务destroy()—— 用完一定要销毁所有 Worker实际项目中建议用 TaskPool 代替手动线程池除非你的任务确实需要 Worker 的长驻特性。写在最后多线程不是银弹但主线程卡顿的问题必须解决。记住两个原则UI 只管渲染计算扔给子线程短任务 TaskPool长任务 Worker。Worker 用完要terminate()数据传递注意序列化限制线程池别开太多——这三点做到多线程就不会给你惹麻烦。下一篇聊聊 UIAbility 生命周期跟 Worker 的销毁时机密切相关建议一起看。
文章目录前言为什么需要多线程Worker vs TaskPoolWorker 创建与通信耗时计算实战线程间数据传递序列化线程池管理写在最后前言你有没有遇到过这种情况列表页加载 5000 条数据排序逻辑一跑整个页面直接冻住用户疯狂点击屏幕没反应心想这 App 怎么跟死机了一样。根本原因就是耗时任务占了主线程UI 没机会刷新。解决方案很简单——把耗时任务扔到子线程去跑Worker 就是干这个的。JavaScript 天生是单线程的ArkTS 也没逃掉这个基因。但 HarmonyOS7 给了两个多线程方案Worker 和 TaskPool。TaskPool 用起来更简单但 Worker 更灵活、更适合长任务。说实话如果你只是想跑个简单计算TaskPool 够用了。但如果你的任务要跑几十分钟、需要维护状态、要跟主线程频繁通信——Worker 才是正解。今天重点聊 Worker。为什么需要多线程主线程只有一个职责刷新 UI。所有用户能看到的东西都在主线程上渲染。一旦你在主线程干重活——大量计算、文件读写、JSON 解析大对象——UI 就卡了。而且 HarmonyOS 对主线程有超时检测阻塞超过一定时间直接 ANR应用无响应。所以规则很简单跟 UI 无关的活统统扔到子线程。Worker vs TaskPool很多人分不清这俩先来张对比表维度WorkerTaskPool线程生命周期开发者手动管理系统自动管理任务粒度整个线程级别单个任务级别长任务支持✅ 可以跑几小时❌ 超过 3 分钟会被系统回收状态维护✅ 线程内可以维护持久状态❌ 任务结束状态就没了优先级控制✅ API 18 支持✅ 支持任务取消需自己实现✅ 原生支持cancel()负载均衡❌ 手动管理✅ 自动扩缩容创建开销较大需要新建线程小复用线程池通信方式postMessage/onmessage任务返回值一句话总结短任务用 TaskPool长任务用 Worker。不确定就用 TaskPool省心。Worker 创建与通信Worker 的通信模型就是经典的Actor 模型——主线程和 Worker 线程内存完全隔离只能通过postMessage互发消息。先看主线程怎么创建 Worker 并收发消息import{worker,MessageEvents}fromkit.ArkTS;EntryComponentstruct WorkerDemo{Stateresult:string等待计算...privateworkerInstance:worker.ThreadWorker|nullnullaboutToAppear(){this.workerInstancenewworker.ThreadWorker(entry/ets/workers/ComputeWorker.ts)this.workerInstance.onmessage(e:MessageEvents){this.result计算结果:${e.data.result}}this.workerInstance.onerror(e:ErrorEvent){console.error(Worker 出错:${e.message})}}startCompute(){if(this.workerInstance){this.workerInstance.postMessage({action:compute,data:1000})}}aboutToDisappear(){this.workerInstance?.terminate()this.workerInstancenull}build(){Column(){Text(this.result).fontSize(20)Button(开始计算).onClick(()this.startCompute())}}}再看 Worker 线程那边的代码entry/ets/workers/ComputeWorker.tsimport{worker,ThreadWorkerGlobalScope,MessageEvents}fromkit.ArkTS;letworkerPort:ThreadWorkerGlobalScopeworker.workerPort;workerPort.onmessage(e:MessageEvents){if(e.data.actioncompute){letnum:numbere.data.dataasnumberletresult:number0for(leti0;inum;i){resulti}workerPort.postMessage({result:result})}}workerPort.onerror(e:ErrorEvent){console.error(Worker 内部错误:${e.message})}关键代码讲解new worker.ThreadWorker(entry/ets/workers/ComputeWorker.ts)—— 主线程创建 Worker参数是 Worker 脚本的相对路径路径写错直接报错worker.workerPort—— Worker 线程侧的通信端口必须定义在顶层作用域不能用constpostMessage()—— 发送消息数据会被序列化后传递onmessage—— 接收消息的回调e.data就是对方发过来的数据terminate()—— 主线程主动销毁 Worker组件销毁时一定要调否则线程泄漏耗时计算实战来个真实的场景图片灰度处理。一张 1920×1080 的图片有 200 万像素主线程处理直接卡死。import{worker,MessageEvents}fromkit.ArkTS;import{image}fromkit.ImageKit;EntryComponentstruct ImageProcessPage{StatesrcPixelMap:PixelMap|nullnullStateprocessedPixelMap:PixelMap|nullnullprivateworkerInstance:worker.ThreadWorker|nullnullaboutToAppear(){this.workerInstancenewworker.ThreadWorker(entry/ets/workers/GrayWorker.ts)this.workerInstance.onmessage(e:MessageEvents){if(e.data.typeprogress){console.info(处理进度:${e.data.percent}%)}if(e.data.typedone){letbuffere.data.bufferasArrayBuffer image.createPixelMap(buffer,{size:{width:e.data.width,height:e.data.height},pixelFormat:4,alphaType:0}).then((pixelMap:PixelMap){this.processedPixelMappixelMap})}}}asyncprocessImage(){if(!this.srcPixelMap||!this.workerInstance)returnletimageInfoawaitthis.srcPixelMap.getImageInfo()letwidthimageInfo.size.widthletheightimageInfo.size.heightletbuffernewArrayBuffer(width*height*4)awaitthis.srcPixelMap.readPixelsToBuffer(buffer)this.workerInstance.postMessage({type:gray,buffer:buffer,width:width,height:height})}aboutToDisappear(){this.workerInstance?.terminate()this.workerInstancenull}build(){Column(){Row(){Image(this.srcPixelMap).width(45%)Image(this.processedPixelMap).width(45%)}Button(灰度处理).onClick(()this.processImage())}}}Worker 端灰度处理逻辑import{worker,ThreadWorkerGlobalScope,MessageEvents}fromkit.ArkTS;letworkerPort:ThreadWorkerGlobalScopeworker.workerPort;workerPort.onmessage(e:MessageEvents){if(e.data.typegray){letbuffere.data.bufferasArrayBufferletdatanewUint8Array(buffer)letwidthe.data.widthasnumberletheighte.data.heightasnumberlettotalwidth*heightfor(leti0;itotal;i){letoffseti*4letrdata[offset]letgdata[offset1]letbdata[offset2]letgrayMath.floor(0.299*r0.587*g0.114*b)data[offset]gray data[offset1]gray data[offset2]grayif(i%500000){workerPort.postMessage({type:progress,percent:Math.floor((i/total)*100)})}}workerPort.postMessage({type:done,buffer:buffer,width:width,height:height})}}关键代码讲解readPixelsToBuffer(buffer)—— 把 PixelMap 的像素数据读到 ArrayBuffer这个 buffer 可以跨线程传递new Uint8Array(buffer)—— Worker 端用 Uint8Array 视图操作像素数据每 4 字节一组RGBA灰度算法0.299R 0.587G 0.114B—— 经典的加权灰度公式符合人眼对绿色更敏感的特性中间穿插的progress消息 —— 让主线程知道处理进度可以显示进度条ArrayBuffer 是可转移对象传给 Worker 后主线程就不能再访问了Worker 处理完需要传回来线程间数据传递序列化Worker 通信基于结构化克隆算法不是所有数据都能传。来理清楚✅ 可以直接传递的基本类型string、number、booleanArrayBuffer、TypedArray普通对象plain object数组❌ 不能直接传递的函数带原型链的对象class 实例DOM 对象用State、Observed修饰的复杂类型如果你需要传 class 实例手动序列化成普通对象再传interfaceUserData{name:stringage:number}classUser{name:stringage:number0toJSON():UserData{return{name:this.name,age:this.age}}}letusernewUser()user.name鸿蒙user.age3this.workerInstance.postMessage(user.toJSON())线程池管理单个 Worker 好搞但如果你需要同时处理多个任务呢比如图片列表要并发压缩总不能每张图建一个 Worker 吧。简单实现一个 Worker 池import{worker,MessageEvents}fromkit.ArkTS;classWorkerPool{privateworkers:worker.ThreadWorker[][]privatetaskQueue:{action:string;data:Object;resolve:Function}[][]privatebusySet:SetnumbernewSet()privatemaxSize:number4constructor(){for(leti0;ithis.maxSize;i){letwnewworker.ThreadWorker(entry/ets/workers/PoolWorker.ts)letindexi w.onmessage(e:MessageEvents){this.busySet.delete(index)this.processQueue()}this.workers.push(w)}}execute(action:string,data:Object):PromiseObject{returnnewPromise((resolve){this.taskQueue.push({action,data,resolve})this.processQueue()})}privateprocessQueue(){while(this.taskQueue.length0){letidleIndexthis.findIdleWorker()if(idleIndex-1)breaklettaskthis.taskQueue.shift()!this.busySet.add(idleIndex)this.workers[idleIndex].postMessage({action:task.action,data:task.data})}}privatefindIdleWorker():number{for(leti0;ithis.workers.length;i){if(!this.busySet.has(i))returni}return-1}destroy(){this.workers.forEach(ww.terminate())this.workers[]}}关键代码讲解maxSize: 4—— 最多 4 个 Worker 并发别开太多线程本身有内存开销taskQueue—— 任务队列Worker 忙不过来时先排队busySet—— 记录哪些 Worker 在忙processQueue每次找空闲 Worker 分配任务destroy()—— 用完一定要销毁所有 Worker实际项目中建议用 TaskPool 代替手动线程池除非你的任务确实需要 Worker 的长驻特性。写在最后多线程不是银弹但主线程卡顿的问题必须解决。记住两个原则UI 只管渲染计算扔给子线程短任务 TaskPool长任务 Worker。Worker 用完要terminate()数据传递注意序列化限制线程池别开太多——这三点做到多线程就不会给你惹麻烦。下一篇聊聊 UIAbility 生命周期跟 Worker 的销毁时机密切相关建议一起看。
 —— 用宝轻量框架设计必读)
