核心内容摘要
咯咯哒的一天
背景问题随着应用复杂度增加性能问题逐渐显现需要从多个角度进行优化。
方案思考如何优化渲染性能如何减少内存占用如何优化网络请求具体实现防抖节流优化// utils/debounce.ts - 防抖节流工具import{ref,onUnmounted}fromvue;// 防抖HookexportfunctionuseDebounceTextends(...args:any[])any(fn:T,delay:number){lettimeoutId:NodeJS.Timeout|nullnull;constdebouncedFn(...args:ParametersT){if(timeoutId){clearTimeout(timeoutId);}timeoutIdsetTimeout((){fn(...args);},delay);};// 清理函数constclear(){if(timeoutId){clearTimeout(timeoutId);timeoutIdnull;}};onUnmounted((){clear();});return{debouncedFn,clear};}// 节流HookexportfunctionuseThrottleTextends(...args:any[])any(fn:T,limit:number){letinThrottle:booleanfalse;constthrottledFn(...args:ParametersT){if(!inThrottle){fn(...args);inThrottletrue;setTimeout(()inThrottlefalse,limit);}};returnthrottledFn;}缓存策略// utils/cache.ts - 缓存工具interfaceCacheOptions{maxAge?:number;// 缓存最大存活时间毫秒maxSize?:number;// 最大缓存数量}classCache{privatecache:Mapstring,{value:any;timestamp:number};privateoptions:CacheOptions;constructor(options:CacheOptions{}){this.cachenewMap();this.options{maxAge:5*60*1000,// 默认5分钟maxSize:100,// 默认最大100条...options};}// 设置缓存set(key:string,value:any):void{// 检查缓存大小if(this.cache.sizethis.options.maxSize!){// 删除最旧的缓存项constfirstKeythis.cache.keys().next().value;this.cache.delete(firstKey);}this.cache.set(key,{value,timestamp:Date.now()});}// 获取缓存get(key:string):any|null{constitemthis.cache.get(key);if(!item){returnnull;}// 检查是否过期if(this.options.maxAgeDate.now()-item.timestampthis.options.maxAge){this.cache.delete(key);returnnull;}returnitem.value;}// 删除缓存delete(key:string):boolean{returnthis.cache.delete(key);}// 清空缓存clear():void{this.cache.clear();}// 清理过期缓存cleanup():void{constnowDate.now();for(const[key,item]ofthis.cache){if(this.options.maxAgenow-item.timestampthis.options.maxAge){this.cache.delete(key);}}}}// 创建全局缓存实例exportconstglobalCachenewCache();// API缓存装饰器exportfunctioncachedApiTextends(...args:any[])Promiseany(fn:T,cacheKey:string,maxAge?:number):T{return((...args:any[]){constkey${cacheKey}_${JSON.stringify(args)};constcachedglobalCache.get(key);if(cached){returnPromise.resolve(cached);}returnfn(...args).then(result{globalCache.set(key,result);returnresult;});})asT;}效果验证通过这些优化技巧可以显著提升应用性能改善用户体验。
经验