JavaScript性能优化核心是减少主线程负担、避免内存泄漏、确保响应及时，关键措施包括读写分离防布局抖动、按需使用throttle/debounce、动态导入匹配用户意图、闭包只捕获必要数据、及时清理监听器与定时器。
JavaScript性能优化不是写得炫，而是让主线程少干活、内存不卡住、用户一操作就响应。真正拖慢页面的，90%不是算法多差，而是DOM乱改、监听器没清、闭包锁着大数组、或者把10MB数据塞进一个setTimeout里跑。
怎么避免“强制同步布局”（Layout Thrashing）
这是最隐蔽也最常被忽略的卡顿元凶：你一边读offsetHeight，一边改style.width，再读clientTop……浏览器被迫在每次读取时立刻重算整个布局，反复触发重排。
- ✅ 正确做法：读写分离——先批量读完所有需要的几何信息（如用
getBoundingClientRect()一次性取完），再统一写样式 - ❌ 错误写法：
for循环里每轮都调用el.offsetHeight，尤其配合el.style.left = i + 'px' - 动画优先用
transform和opacity，它们走合成层，不触发重排 - 真要动态测尺寸，用
requestAnimationFrame包裹读取逻辑，确保在下一帧渲染前完成
事件高频触发时，该用throttle还是debounce
不是所有“防抖节流”都一样；选错等于白加——滚动、鼠标移动必须节流，输入框搜索才适合防抖。
-
throttle：保证每delay毫秒最多执行一次，适合scroll、mousemove这类持续流式事件 -
debounce：只在最后一次触发后等待delay毫秒再执行，适合input校验、resize调整布局 - Lodash默认
_.throttle不触发首尾调用，生产环境务必加{leading: true, trailing: true} - 自己手写别漏
last时间戳判断，否则可能高频连发
代码分割不是“用了import()就完事”
动态导入只是起点；加载时机不对，照样阻塞交互。比如在useEffect里无条件import()图表库，用户还没点按钮，它就已经在后台下载并解析了。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐场景：按钮点击、路由跳转、表单提交后——有明确用户意图再加载
- ❌ 反模式：组件挂载就
import()，或用React.lazy但没配Suspensefallback，导致白屏卡死 - Webpack/Vite会自动分包，但得检查
node_modules是否被打进main.js——大型依赖如moment必须换date-fns或按需引入 - 验证效果：打开Chrome DevTools的
Network面板，过滤js，看chunk是否按需出现、体积是否合理
闭包不是性能敌人，但闭包“锁住不该锁的东西”就是
闭包本身很快，问题出在它让本该被回收的大对象一直活着——比如监听器里捕获了整个this.state或document.querySelector('#huge-list')。
- ✅ 安全做法：只传必要字段，比如
handleClick(id)而不是handleClick(item)（如果item含10MB附件） - ❌ 高危写法：
setInterval(() => console.log(this), 1000)——this引用整个组件实例，GC无法清理 - 定时器/监听器销毁时，记得
clearInterval和removeEventListener，尤其在ReactuseEffectcleanup里 - 临时存私有数据，优先用
WeakMap而非普通Map，键对象销毁时不会阻止GC
最麻烦的从来不是“不知道怎么做”，而是“以为做了，其实没生效”——比如加了debounce却忘了设leading: true，导致首次输入没响应；又比如import()拆了包，但没关掉构建工具的splitChunks.chunks: 'all'，结果公共模块反而被重复打进多个chunk。优化得靠Performance面板录一次真实交互，而不是靠猜。
