JavaScript性能优化的核心是减少主线程阻塞、降低内存开销、提升执行效率并保障渲染流畅，关键在于避免多余和延迟操作；需批量修改样式、读写分离、优先使用transform/opacity动画、合理使用DOM操作与事件委托、及时清理内存及异步分片执行任务。
JavaScript性能优化的核心是减少主线程阻塞、降低内存开销、提升执行效率，并让渲染更流畅。关键不在于写得多快，而在于避免做“多余的事”和“太晚的事”。
减少重排（Reflow）与重绘（Repaint）
每次修改DOM样式（尤其是几何属性如width、height、top、left）都可能触发浏览器重新计算布局（reflow），代价很高。重绘（repaint）虽轻一些，但频繁发生也影响帧率。
- 批量修改样式：用
className或cssText一次性设置，而不是逐个改style.xxx - 读写分离：避免“读-改-读-改”模式。例如，不要在循环里反复读
offsetTop又改style.left；先集中读取所有需要的值，再统一修改 - 使用
transform和opacity做动画：它们由合成器线程处理，不触发reflow/repaint，还能开启GPU加速 - 对频繁变动的元素，考虑用
position: absolute或will-change: transform（慎用，仅对明确要动画的元素）
高效操作DOM与事件
直接高频操作真实DOM很慢；事件绑定不当会引发内存泄漏或响应延迟。
- 用
DocumentFragment批量插入节点，比多次appendChild快得多 - 列表渲染优先用
innerHTML或虚拟DOM方案（如React/Vue），避免手动拼接+循环appendChild - 事件委托代替为每个子元素绑定事件：把事件监听器放在父容器上，用
event.target判断来源 - 及时移除不再需要的事件监听器，尤其在组件卸载或页面切换时（记得保存引用以便
removeEventListener）
合理管理内存与执行时机
内存泄漏和同步长任务会让页面卡顿甚至崩溃。
立即学习“Java免费学习笔记（深入）”；
- 避免闭包意外保留大对象引用：比如在定时器或事件回调中引用了整个DOM节点或大型数据结构
- 用
setTimeout(fn, 0)或Promise.resolve().then()把非紧急任务“让出”主线程，防止阻塞渲染 - 对计算密集型操作（如大数据排序、图像处理），拆分成小块，用
requestIdleCallback或setTimeout分片执行 - 及时清理
setInterval、setTimeout、IntersectionObserver等长期持有引用的对象
代码层面的轻量实践
有些写法看着简洁，实际隐含高成本。
- 避免在循环中调用函数获取长度：
for (let i = 0; i → 改为<code>for (let i = 0, len = arr.length; i - 用
const/let替代var，减少变量提升和作用域查找开销 - 字符串拼接多于3次时，优先用数组
join或模板字符串，而非+= - 慎用
eval、Function构造函数、with——它们阻止JS引擎优化，且有安全风险
不复杂但容易忽略。多数性能问题不是来自算法本身，而是DOM交互方式、资源生命周期管理、以及对浏览器渲染机制的理解偏差。
