HarmonyOS 性能优化实战：ClickUtil 节流防抖 + CacheUtil 内存缓存协同方案

一、前言

近期发现一款很有意思的HarmonyOS 三方库, 地址 @pura/harmony-utils(V1.4.0) , 作者是"桃花镇童长老", 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦

案例demo导航展示

↓↓↓↓↓↓接下来言归正传 ↓↓↓↓

在 HarmonyOS 应用开发中，有两类常见的性能问题：

1. 用户频繁操作：用户快速点击按钮导致重复触发网络请求或耗时操作。
2. 重复数据请求：同样的数据被反复从网络获取，增加延迟和流量。

ClickUtil提供了节流（throttle）和防抖（debounce）来解决第一个问题；CacheUtil提供了内存缓存来解决第二个问题。本文介绍如何将它们结合起来，构建高性能的 HarmonyOS 应用。

二、工具类核心 API 回顾

2.1 ClickUtil

// 节流：wait 毫秒内最多执行一次// immediate=true: 第一次立即执行// immediate=false: wait 毫秒后执行staticthrottle(func:()=>void,wait:number=1000,immediate:boolean=true):void// 防抖：wait 毫秒后执行，期间重复调用则重新计时// clickId: 用于区分不同按钮的防抖 ID（默认所有按钮共享一个）staticdebounce(func:()=>void,wait:number=1000,clickId:string=ClickUtil.defaultId):void

2.2 CacheUtil

// 存入缓存staticput<T>(key:string,value:T):void// 读取缓存staticget<T>(key:string):T// 检查是否有缓存statichas(key:string):boolean// 删除缓存staticremove(key:string):void// 判断缓存是否为空staticisEmpty():boolean// 清空所有缓存staticclear():void

三、Demo 中的实际使用代码

3.1 CacheCharClickDemoPage.ets 中的节流演示

// 节流演示 - 立即执行模式onThrottleImmediateClick(){ClickUtil.throttle(()=>{this.throttleCount++;this.addLog('Throttle',`节流触发（立即）: 第${this.throttleCount}次，wait=${this.throttleWait}ms`,'success');},this.throttleWait,true);}// 节流演示 - 延迟执行模式onThrottleDelayClick(){ClickUtil.throttle(()=>{this.throttleCount++;this.addLog('Throttle',`节流触发（延迟）: 第${this.throttleCount}次`,'success');},this.throttleWait,false);}

3.2 防抖演示

// 防抖演示 - 使用 clickId 区分不同按钮onDebounceAClick(){ClickUtil.debounce(()=>{this.debounceACount++;this.addLog('Debounce-A',`防抖A触发: 第${this.debounceACount}次`,'success');},this.debounceWait,'btn-a');}onDebounceBClick(){ClickUtil.debounce(()=>{this.debounceBCount++;this.addLog('Debounce-B',`防抖B触发: 第${this.debounceBCount}次`,'success');},this.debounceWait,'btn-b');}

关键知识点：两个按钮使用不同的clickId（'btn-a'和'btn-b'），这样 A 按钮的防抖计时不会影响 B 按钮。底层实现中，CacheUtil.put(clickId, timeoutId)用于存储每个按钮的定时器 ID。

3.3 CacheUtil 演示

// 添加缓存addCache(){CacheUtil.put(this.cacheKey,this.cacheValue);this.addLog('Cache',`已缓存: key="${this.cacheKey}" value="${this.cacheValue}"`,'success');this.refreshCacheDisplay();}// 读取缓存getCache(){if(CacheUtil.has(this.cacheKey)){constvalue=CacheUtil.get<string>(this.cacheKey);this.addLog('Cache',`读取: key="${this.cacheKey}" → "${value}"`,'success');}else{this.addLog('Cache',`未找到: key="${this.cacheKey}"`,'warn');}}

四、组合使用方案

场景 1：节流 + 缓存 = 防重复请求并缓存结果

// 搜索功能：节流控制触发频率，缓存避免重复请求onSearchInput(keyword:string){ClickUtil.throttle(()=>{this.performSearch(keyword);},500,true);}asyncperformSearch(keyword:string){constcacheKey=`search:${keyword}`;// 先查缓存if(CacheUtil.has(cacheKey)){this.searchResults=CacheUtil.get<SearchResult[]>(cacheKey);this.addLog('Search',`命中缓存:${keyword}`,'success');return;}// 缓存未命中，发起请求constresults=awaitsearchApi(keyword);CacheUtil.put(cacheKey,results);this.searchResults=results;this.addLog('Search',`新请求:${keyword}, 结果已缓存`,'info');}

场景 2：防抖 + 缓存 = 输入提示优化

// 输入框实时搜索建议：防抖避免每次按键都触发，缓存避免重复请求onInputChange(text:string){ClickUtil.debounce(async()=>{constcacheKey=`suggest:${text}`;if(CacheUtil.has(cacheKey)){this.suggestions=CacheUtil.get<string[]>(cacheKey);return;}constsuggestions=awaitgetSuggestions(text);CacheUtil.put(cacheKey,suggestions);this.suggestions=suggestions;},300,'search-input');}

场景 3：缓存失效管理

// 带过期时间的缓存（CacheUtil 本身不支持 TTL，需要手动实现）interfaceCachedItem<T>{data:T;expireAt:number;// 过期时间戳（ms）}functionsetCache<T>(key:string,data:T,ttlMs:number=5*60*1000){constitem:CachedItem<T>={data,expireAt:Date.now()+ttlMs};CacheUtil.put(key,item);}functiongetCache<T>(key:string):T|undefined{if(!CacheUtil.has(key))returnundefined;constitem=CacheUtil.get<CachedItem<T>>(key);if(Date.now()>item.expireAt){CacheUtil.remove(key);// 已过期，删除returnundefined;}returnitem.data;}

五、性能提升效果对比

六、小结

ClickUtil和CacheUtil是 HarmonyOS 工具库中天然配合的一对：

• ClickUtil 节流/防抖→ 控制事件触发频率，减少不必要的函数执行
• CacheUtil 内存缓存→ 避免重复计算和重复网络请求

实际上，ClickUtil.debounce的内部实现就依赖CacheUtil来存储定时器 ID——这是两者协作的最好佐证。在日常开发中，将"频率控制"和"结果缓存"结合使用，是提升 HarmonyOS 应用性能的高效手段。