优化前端性能需避免循环中重复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 面板录一段真实操作，比凭经验猜更可靠。
