优化DOM操作需减少重排重绘：用DocumentFragment批量修改；读写布局信息集中处理；用classList替代className；事件委托代替多绑定；缓存DOM查询结果。
避免频繁的 DOM 操作
直接反复读写 document.getElementById 或修改 innerHTML 会触发重排（reflow）和重绘（repaint），尤其在循环中极其低效。
- 把多次 DOM 更新合并：先用
document.createDocumentFragment()构建节点树，再一次性挂载 - 读取布局信息（如
offsetHeight、getBoundingClientRect()）前，避免在它前面有未提交的样式修改，否则强制同步回流 - 用
className或classList批量控制样式，而不是逐个设
style.xxx
节流与防抖不是万能解药，得看场景
用户滚动、输入、窗口缩放等事件高频触发时，盲目加 debounce 或 throttle 可能掩盖真实问题，甚至引入延迟感。
- 滚动监听优先考虑
IntersectionObserver替代scroll事件 —— 它不阻塞主线程，且原生支持懒加载、可视区判断 -
resize事件在现代浏览器中极少需要监听；响应式布局尽量交给 CSS 媒体查询或container queries - 搜索框输入建议：延迟 200–300ms 后发请求比“每次按键都 debounce”更合理；同时记得在发送新请求前
abort()上一个fetch（用AbortController）
对象复用比「函数式」创建更省内存
V8 对短生命周期对象优化很好，但若在渲染循环或高频回调中持续新建对象（如 { x: a, y: b }），GC 压力会上升，尤其在低端设备上明显卡顿。
- 对结构固定的数据，复用对象实例：比如动画帧中的状态对象，用
Object.assign(target, source)而非每次都return { ... } - 数组同理：
array.length = 0清空比[]创建新数组更轻量；必要时用new Array(n)预分配长度 -
正则表达式字面量（
/pattern/g）在循环中重复使用会隐式创建多个实例；提取为常量，或用RegExp构造函数配合缓存
注意 console.log 的隐藏开销
很多人以为开发环境下的 console.log 不影响性能，但它在 Chrome 中仍会序列化对象、捕获堆栈、触发 UI 更新 —— 在每秒几十次调用的动画或 WebSocket 心跳里，这会吃掉几毫秒。
- 上线前务必移除或用条件包裹：
process.env.NODE_ENV === 'development' && console.log(...) - 避免打印大型对象或 DOM 节点（如
console.log(document.body)），它们会触发深层遍历 - 替代方案：用
performance.mark()+performance.measure()做轻量级埋点，或只打关键标记（console.time('render')）
