JavaScript性能优化核心是减少主线程阻塞、降低内存开销、提升执行效率与渲染响应速度；需拆分长任务、用Web Worker处理计算、延迟脚本加载、批量DOM操作、避免强制同步布局、合理管理内存、精简代码并持续用DevTools分析瓶颈。
JavaScript性能优化核心在于减少主线程阻塞、降低内存开销、提升执行效率和渲染响应速度。关键不在于写得多快，而在于让浏览器更轻松地解析、执行和绘制。
减少主线程负担
JavaScript在浏览器中运行于单线程的主线程，任何耗时操作都会阻塞渲染和用户交互。
- 避免长任务：单个函数执行超过50ms就可能造成卡顿，可使用
setTimeout或requestIdleCallback将大任务拆分为小块（时间切片） - 用
Web Worker处理纯计算逻辑（如数据解析、加密、图像处理），不操作DOM - 延迟非关键脚本：给
<script></script>添加defer（按顺序执行，不阻塞HTML解析）或async（异步下载并立即执行，适合独立逻辑）
高效操作DOM
频繁或不当的DOM操作是常见性能瓶颈，因为每次修改都可能触发重排（reflow）和重绘（repaint）。
- 批量更新：用
DocumentFragment暂存多个节点，一次性插入；或使用innerHTML替代多次appendChild - 避免强制同步布局：不要在循环中读取
offsetTop、getBoundingClientRect()等会触发重排的属性后立刻修改样式 - 用CSS类控制样式变更，而非直接改
element.style.xxx；动画优先用transform和opacity，它们由合成线程处理，不触发布局
合理管理内存与资源
内存泄漏和冗余对象会拖慢GC（垃圾回收）频率，导致页面卡顿甚至崩溃。
立即学习“Java免费学习笔记（深入）”；
- 及时解绑事件监听器：尤其在组件卸载（如SPA路由切换）时调用
removeEventListener，或使用AbortController终止addEventListener的信号 - 避免闭包意外保留大对象引用：检查回调函数是否无意中捕获了DOM节点、大型数组或缓存数据
- 图片/资源懒加载：用
loading="lazy"或IntersectionObserver按需加载可视区外的内容
代码层面精简与提速
现代JS引擎（V8等）对代码结构敏感，一些写法会影响JIT编译和内联优化。
- 避免全局变量：全局属性访问慢且易被隐藏类破坏，优先使用局部常量和函数参数
- 保持对象形状稳定：同一构造函数创建的对象，属性添加顺序和类型尽量一致，利于V8优化
- 慎用
try...catch：它会使内部函数无法被JIT优化；错误处理集中到边界层（如React的ErrorBoundary） - 用
for代替forEach做密集循环（无明显差异但更可控）；数组方法如map/filter注意是否生成新数组——必要时用for+复用数组减少GC压力
不复杂但容易忽略：性能优化不是一劳永逸，要结合Chrome DevTools Performance面板录制真实用户场景，关注“Main”线程火焰图、内存分配采样和“Rendering”帧率。先定位瓶颈，再针对性改进。
