javascript如何进行性能优化_有哪些常用技巧【教程】

优化前端性能需避免循环中重复dom访问、减少重排重绘，批量读写布局，用requestAnimationFrame更新视觉；慎用闭包防内存泄漏；替代低效API如链式数组方法、jsON深拷贝；控制微任务数量，善用Performance面板分析。

避免在循环中重复计算或访问 DOM

浏览器重排（reflow）和重绘（repaint）是性能杀手，尤其当 document.getElementById、offsetHeight 或 getBoundingClientRect() 被放在 for 循环里时，每次调用都可能触发强制同步布局。

• 把 DOM 查询提到循环外：const el = document.getElementById('my-list');，再在循环里复用 el
• 批量读取布局信息（如先读所有 offsetTop），再批量写入（如统一修改 style.transform），避免“读-写-读-写”模式
• 用 requestAnimationFrame 批量处理视觉更新，比 setTimeout 更精准且不阻塞主线程

减少闭包与长生命周期对象的意外持有

闭包本身不是问题，但容易隐式延长作用域链中变量的存活时间，导致内存无法释放——尤其在事件监听器、定时器、promise 回调中。

• 给事件监听器加 once: true 选项，或手动调用 removeEventListener，避免监听器持续引用组件实例
• 在 setInterval 回调里，别直接引用外部大对象（如整个 vue 组件或 react state），可提取必要字段：const { id, name } = this.data;
• 使用 Weakmap 存储私有数据，它不会阻止键所指向对象被 GC，适合缓存但不强持有

用现代 API 替代低效惯用写法

很多“看起来简洁”的写法在底层开销不小，比如 Array.prototype.map().Filter() 连用会遍历两次数组；json.parse(JSON.stringify(obj)) 深拷贝不仅慢，还丢函数、undefined、date 等类型。

• 用 for 或 for...of 替代链式数组方法做单次遍历过滤+映射，性能提升明显（尤其 >10k 元素）
• 深拷贝优先用结构化克隆：structuredClone(obj)（chrome 98+、firefox 94+ 支持），比 JSON 方案快且保类型
• 字符串拼接超过 5 次，改用 Array.prototype.push() + join('')，V8 对后者有专门优化

警惕微任务与 Promise 链的隐式延迟

Promise.then 和 queueMicrotask 的回调总在当前宏任务末尾执行，看似“异步”，实则可能堆积大量微任务，造成 ui 响应卡顿。

立即学习“Java免费学习笔记（深入）”；

• 避免在滚动、输入等高频事件中无节制地创建 Promise（例如每次 input 都 fetch），改用防抖或节流控制频率
• 长 Promise 链（>5 层）考虑拆成多个 await，让 JS 引擎有机会中断并交还控制权给渲染线程
• 调试时注意 chrome devtools 的 Performance 面板里 “Microtasks” 区域是否持续高亮——那是微任务过载的信号

真正影响性能的往往不是某一行代码多慢，而是它在哪种上下文里被反复触发、是否意外拖住了渲染帧或阻止了内存回收。动手前先打开 Performance 面板录一段真实操作，比凭经验猜更可靠。