JavaScript / TypeScript 易踩坑知识点 —— 性能与内存类一、循环中频繁操作 DOM问题说明在循环中每次操作 DOM 都会触发浏览器的重排Reflow和重绘Repaint性能极差。踩坑示例// ❌ 每次循环都操作 DOM触发多次重排constlistdocument.getElementById(list)for(leti0;i1000;i){constlidocument.createElement(li)li.textContentItem${i}list.appendChild(li)// 每次 append 都触发重排}// ✅ 方案1DocumentFragment推荐constfragmentdocument.createDocumentFragment()for(leti0;i1000;i){constlidocument.createElement(li)li.textContentItem${i}fragment.appendChild(li)}list.appendChild(fragment)// 只触发一次重排// ✅ 方案2字符串拼接后一次性插入lethtmlfor(leti0;i1000;i){htmlliItem${i}/li}list.innerHTMLhtml// 只触发一次重排性能对比方案重排次数适用场景每次 appendN 次不推荐DocumentFragment1 次推荐类型安全innerHTML 拼接1 次简单场景注意 XSS二、内存泄漏问题说明JavaScript 有垃圾回收机制GC但某些模式会导致僵尸对象无法被回收造成内存泄漏。常见泄漏场景1. 未清理的事件监听器classMyComponent{constructor(){window.addEventListener(resize,this.handleResize)// ❌ 组件销毁时未移除}handleResize(){console.log(window resized)}// ✅ 在组件销毁时移除监听器destroy(){window.removeEventListener(resize,this.handleResize)}}2. 定时器未清除// ❌ 组件销毁后定时器仍在运行useEffect((){consttimersetInterval((){console.log(tick)},1000)// 没有清理函数组件卸载后定时器继续运行},[])// ✅ 返回清理函数useEffect((){consttimersetInterval((){console.log(tick)},1000)return()clearInterval(timer)// 组件卸载时清除定时器},[])3. 闭包引用大对象// ❌ 闭包持有了对大对象的引用导致无法回收functionsetupBigObject(){constbigDatanewArray(1000000).fill(data)returnfunction(){returnbigData.length// 闭包引用了 bigData}}constgettersetupBigObject()// bigData 无法被 GC 回收因为 getter 的闭包仍然引用它// ✅ 避免在闭包中引用不需要的大对象functiongetLength(){constbigDatanewArray(1000000).fill(data)constlenbigData.length// bigData 在函数结束后可以被回收returnlen}4. 数组/集合持续增长// ❌ 数组只增不减内存持续增长constcachenewMap()functionfetchData(id){if(!cache.has(id)){cache.set(id,fetch(/api/data/${id}))}returncache.get(id)}// 随着 id 增多Map 会无限增长// ✅ 设置缓存上限或使用 LRU 策略importLRUCachefromlru-cacheconstcachenewLRUCache({max:100})// 最多缓存 100 条三、防抖与节流问题说明高频事件如scroll、resize、input的回调函数如果不加控制会导致性能问题。防抖Debounce// 防抖在最后一次调用后延迟执行期间再次调用则重新计时functiondebounce(fn:Function,delay:number){lettimer:ReturnTypetypeofsetTimeout|nullnullreturnfunction(...args:any[]){if(timer)clearTimeout(timer)timersetTimeout((){fn.apply(this,args)},delay)}}// 使用搜索框输入时防抖consthandleSearchdebounce((keyword:string){fetch(/api/search?q${keyword}).then(resres.json()).then(datarenderResults(data))},300)inputElement.addEventListener(input,(e){handleSearch((e.targetasHTMLInputElement).value)})节流Throttle// 节流固定时间间隔内只执行一次functionthrottle(fn:Function,interval:number){letlastTime0lettimer:ReturnTypetypeofsetTimeout|nullnullreturnfunction(...args:any[]){constnowDate.now()constremaininginterval-(now-lastTime)if(remaining0){fn.apply(this,args)lastTimenow}elseif(!timer){timersetTimeout((){fn.apply(this,args)timernulllastTimeDate.now()},remaining)}}}// 使用滚动事件节流window.addEventListener(scroll,throttle((){console.log(scroll position:,window.scrollY)},100))防抖 vs 节流对比场景推荐原因搜索框输入防抖用户输完再请求窗口 resize节流持续监听尺寸变化按钮点击防抖防止重复提交滚动加载节流定期检测位置鼠标移动节流降低事件频率四、事件委托问题说明给每个子元素单独绑定事件监听器会消耗大量内存使用事件委托可以在父元素上统一处理。踩坑示例// ❌ 给每个 li 绑定事件1000 个 li 1000 个监听器constitemsdocument.querySelectorAll(li)items.forEach(item{item.addEventListener(click,(){console.log(item.textContent)})})// ✅ 事件委托在父元素上监听通过 event.target 判断constlistdocument.getElementById(list)list.addEventListener(click,(event){consttargetevent.targetasHTMLElementif(target.tagNameLI){console.log(target.textContent)}})Vue/React 中的事件委托!-- Vue 中动态列表 -- template ul clickhandleListClick li v-foritem in items :keyitem.id{{ item.name }}/li /ul /template script setup const handleListClick (event: MouseEvent) { const target event.target as HTMLElement if (target.closest(li)) { const id target.closest(li)?.dataset.id console.log(Clicked item:, id) } } /script五、大数据列表虚拟滚动问题说明渲染大量 DOM 节点如 10000 行表格会导致页面卡顿虚拟滚动只渲染可见区域的节点。原理说明虚拟滚动的核心思想是只渲染视口内可见的 DOM 节点通过计算偏移量来模拟滚动效果。使用第三方库推荐// 推荐使用成熟的虚拟滚动库// vue-virtual-scrollerVue// react-window / react-virtualizedReactimport{List}fromvue-virtual-scroller// 基本用法// 需要指定 itemHeight每行高度和 visibleItems可见区域可显示的最大行数// 库会自动计算并只渲染可视区域内的行手动实现思路// 虚拟滚动核心逻辑functioncalculateVisibleItems(scrollTop:number,containerHeight:number,itemHeight:number,totalItems:number){conststartIndexMath.floor(scrollTop/itemHeight)constendIndexMath.min(startIndexMath.ceil(containerHeight/itemHeight)1,totalItems)return{startIndex,endIndex}}// 用 transform: translateY 模拟滚动位置// 只渲染 startIndex 到 endIndex 之间的数据六、图片与资源优化问题说明大图片和未优化的资源是页面加载慢的主要原因之一。优化策略// 1. 图片懒加载constimagesdocument.querySelectorAll(img[data-src])constimageObservernewIntersectionObserver((entries,observer){entries.forEach(entry{if(entry.isIntersecting){constimgentry.targetasHTMLImageElement img.srcimg.dataset.src||img.removeAttribute(data-src)observer.unobserve(img)}})})images.forEach(imgimageObserver.observe(img))// 2. 图片压缩上传前functioncompressImage(file:File,maxWidth:number800):PromiseBlob{returnnewPromise((resolve){constimgnewImage()img.srcURL.createObjectURL(file)img.onload(){constcanvasdocument.createElement(canvas)constscaleMath.min(1,maxWidth/img.width)canvas.widthimg.width*scale canvas.heightimg.height*scaleconstctxcanvas.getContext(2d)ctx?.drawImage(img,0,0,canvas.width,canvas.height)canvas.toBlob(blobresolve(blob!),image/jpeg,0.8)}})}// 3. 使用 WebP 格式更小的文件体积// picture 标签提供格式降级// picturesource srcsetimage.webp typeimage/webpimg srcimage.jpg/picture七、requestAnimationFrame 替代 setTimeout/setInterval问题说明setTimeout和setInterval的精度不够高且不受页面可见性影响动画场景推荐使用requestAnimationFrame。踩坑示例// ❌ setInterval 做动画精度低且可能掉帧letpos0setInterval((){box.style.leftpospx},16)// 约 60fps但不精确// ✅ requestAnimationFrame 与浏览器刷新率同步functionanimate(){pos1box.style.leftpospxif(pos100){requestAnimationFrame(animate)}}requestAnimationFrame(animate)// ✅ 页面不可见时自动暂停document.addEventListener(visibilitychange,(){if(document.hidden){// 暂停动画}else{// 恢复动画}})总结对照表坑点错误写法正确写法循环操作 DOM每次循环 appendDocumentFragment事件监听器泄漏未移除监听器销毁时 removeEventListener定时器泄漏未清除定时器useEffect 返回清理函数闭包引用大对象闭包持有大对象引用避免在闭包中引用不需要的大对象缓存无限增长Map/Array 只增不减LRU 缓存设置上限高频事件无节流直接绑定 scroll/input防抖/节流每个子元素绑定事件forEach 绑定监听器事件委托大数据列表全渲染渲染 10000 行 DOM虚拟滚动大图片不压缩直接上传原图上传前压缩 WebPsetInterval 做动画setIntervalrequestAnimationFrame