答案：JavaScript性能优化需减少重排重绘，批量操作DOM，用类切换替代内联样式，避免同步布局；采用事件委托降低内存开销；通过防抖节流控制高频事件；及时解绑事件、清除定时器以优化内存；利用Web Workers处理密集计算，保持主线程流畅。
JavaScript性能优化的核心在于减少执行时间、降低内存消耗和提升用户体验。关键不是写得多炫，而是让代码跑得稳、快、省。下面从几个实际角度拆解核心技术。
减少重排与重绘
页面的渲染性能极大受制于DOM操作。每次修改元素样式或结构，浏览器都可能触发重排（reflow）和重绘（repaint），尤其在频繁操作时会严重卡顿。
- 批量修改DOM：避免在循环中直接操作DOM，可先用文档片段（DocumentFragment）或构建字符串后一次性插入。
- 使用 CSS 类代替内联样式修改：通过切换class来改变样式，比逐条设置style属性更高效。
- 避免强制同步布局：比如读取offsetTop、clientWidth等属性前，不要紧跟着修改布局，否则会强制浏览器提前重排。
合理使用事件委托
给大量子元素绑定事件会占用过多内存，还可能造成内存泄漏。事件委托利用事件冒泡机制，将事件绑定到父级统一处理。
- 例如，一个长列表点击事件不必每个item都绑定，只需绑定到外层容器，通过event.target判断具体点击项。
- 这不仅节省内存，还能自动支持动态添加的元素，无需重复绑定。
函数防抖与节流
对于高频触发事件如scroll、resize、input，若不加以控制，回调函数会频繁执行，拖慢页面。
立即学习“Java免费学习笔记（深入）”；
- 防抖（debounce）：只在最后一次触发后等待一段时间再执行，适合搜索框输入联想等场景。
- 节流（throttle）：固定时间间隔内最多执行一次，适合监控滚动位置、窗口尺寸变化等。
- 原生实现简单，也可借助Lodash等工具库。
优化内存使用与避免泄漏
JavaScript虽有垃圾回收机制，但不当编码仍会导致内存无法释放。
- 及时解除事件监听，尤其是全局或长期存在的DOM节点。
- 避免意外创建全局变量，特别是在闭包中引用大对象。
- 定时器中引用外部变量时，确保不再需要时清除interval或timeout。
- 使用Chrome DevTools的Memory面板分析堆快照，查找残留对象。
使用Web Workers处理密集计算
JavaScript是单线程的，长时间运行的任务会阻塞UI渲染。
- 把耗时计算（如数据解析、图像处理）移入Web Worker，在后台线程执行。
- 主线程保持响应，用户操作不卡顿。
- 注意：Worker不能操作DOM，通信需通过postMessage，有序列化开销。
基本上就这些。真正有效的优化往往来自对常见瓶颈的识别和针对性处理，而不是盲目套用技巧。理解原理，结合工具分析，才能持续提升性能。
