JavaScript性能优化的核心是减少主线程阻塞、降低内存开销、提升执行效率并优化渲染：①减少重排重绘，批量操作DOM；②避免强制同步布局，用transform/opacity替代布局变更；③合理使用事件委托、节流防抖及及时移除监听器；④优化执行逻辑与内存管理。
JavaScript 性能优化的核心是减少主线程阻塞、降低内存开销、提升执行效率，并让浏览器更高效地渲染。它不单是“写得快”，更是“让浏览器省力、让用户感知流畅”。
减少重排（Reflow）和重绘（Repaint）
DOM 操作和样式读写会频繁触发重排重绘，这是前端性能杀手之一。浏览器需要重新计算布局、绘制像素，尤其在循环中反复读写 offsetTop、clientWidth 或修改 style 属性时尤为明显。
- 批量修改 DOM：用
documentFragment或先隐藏元素（display: none），操作完再显示 - 避免“强制同步布局”：不要在修改样式后立刻读取布局属性（如
el.style.width = '200px'; console.log(el.offsetHeight);），可改用getComputedStyle批量读取，或把读写操作分开 - 用 CSS 变换（
transform、opacity）替代位置/尺寸变更，它们走合成层（Compositor），不触发布局计算
合理使用事件与监听器
大量绑定事件监听器不仅占用内存，还可能造成响应延迟，尤其在列表滚动或高频交互场景下。
- 优先使用事件委托：在父容器监听，用
event.target判断来源，避免为每个子项单独绑定 - 对
scroll、resize、input等高频事件做节流（throttle）或防抖（debounce），例如用requestAnimationFrame包裹 scroll 处理逻辑，确保每帧最多执行一次 - 及时移除不再需要的监听器，特别是动态创建又销毁的组件中，避免内存泄漏
优化 JavaScript 执行与内存
函数调用、闭包、未释放的对象引用都会影响 V8 引擎的垃圾回收效率和运行时性能。
立即学习“Java免费学习笔记（深入）”；
- 避免深层嵌套循环和重复计算：把数组长度缓存到变量中，如
for (let i = 0, len = arr.length; i - 谨慎使用闭包：长期存活的闭包会阻止外部作用域被回收；若只需数据快照，可用解构或展开运算符代替引用整个对象
- 及时清理定时器、全局变量、未卸载的观察者（如
MutationObserver、IntersectionObserver） - 大数组或长列表考虑虚拟滚动（virtual scrolling），只渲染可视区域内的 DOM 节点
加载与执行策略优化
脚本加载时机和方式直接影响首屏速度和交互响应。
- 关键 JS 使用
async（无依赖）或defer（有顺序依赖），避免阻塞 HTML 解析 - 非首屏逻辑、工具函数、错误监控等代码做动态
import()懒加载，配合loading状态提示 - 利用
Web Workers将密集计算（如图像处理、JSON 解析、加密）移出主线程，保持 UI 响应 - 启用
Compression（gzip / Brotli）和合理设置Cache-Control，减少重复下载
不复杂但容易忽略：多数性能问题不是语法层面的“慢”，而是交互模型和资源调度上的不合理。从用户点击到视觉反馈控制在 100ms 内，动画保持 60fps，这些目标倒推回来，就能自然筛选出真正该优化的环节。
