JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、避免不必要的计算和重排重绘，具体包括批量DOM操作、读写分离、事件委托、节流防抖、及时清理定时器与监听器、防止内存泄漏及拆分长任务。
JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、避免不必要的计算和重排重绘。常见瓶颈往往藏在看似无害的代码里，比如频繁的DOM操作、未清理的定时器、过度的闭包引用，或是滥用console.log在生产环境。
DOM操作太频繁，触发多次重排重绘
每次读写DOM属性（如offsetTop、clientWidth或直接改style.color）都可能强制浏览器同步计算布局（reflow）或绘制（repaint），尤其在循环中反复读写时开销巨大。
- 批量操作：用
documentFragment暂存多个节点，一次性插入；或先设display: none，操作完再显示 - 读写分离：把所有“读取”操作集中放在前面（如先缓存
el.offsetWidth），所有“写入”操作放在后面 - 用
transform和opacity做动画——它们走合成层，不触发布局计算
事件监听器太多，或没及时解绑
给大量元素单独绑定事件（比如1000个按钮各绑一个click），不仅内存占用高，还拖慢初始化。滚动、输入等高频事件若没节流/防抖，会瞬间堆积数十次回调。
- 用事件委托：监听父容器，通过
event.target判断来源，减少监听器数量 - 高频事件加限制：
scroll、resize用requestIdleCallback或简单节流（如300ms内只执行一次） - 组件卸载时手动
removeEventListener，尤其在单页应用中避免内存泄漏
内存泄漏不易察觉，但长期运行就卡顿
JS有自动垃圾回收，但某些引用会让对象无法被释放：全局变量意外保留、闭包中持有大对象、定时器没清除、控制台日志里留着DOM节点引用等。
立即学习“Java免费学习笔记（深入）”；
- 避免随意挂载到
window或this上；用let/const替代var减少作用域污染 - 定时器记得存ID，离开页面前用
clearTimeout/clearInterval清理 - Chrome DevTools 的 Memory 面板可录制堆快照，对比前后找“Detached DOM tree”或持续增长的对象
同步阻塞任务太长，UI直接冻结
一段耗时100ms以上的同步JS（比如大数组排序、深度遍历、正则回溯）会让浏览器无法响应点击、滚动，用户感知就是“卡死”。
- 拆分任务：用
setTimeout或queueMicrotask把大循环切成小块，每轮后交还控制权 - 用Web Worker处理纯计算：图像处理、JSON解析、加密等不涉及DOM的操作全扔进Worker
- 懒加载+按需计算：列表虚拟滚动、折叠面板内容延迟渲染、复杂图表初始化时机后移
基本上就这些。不复杂但容易忽略——多数性能问题不是算法多差，而是习惯性写了“能跑就行”的代码。从Chrome的Performance面板录一段用户操作，一眼就能看出哪段JS吃CPU、哪次渲染花了200ms，比猜强得多。
