JavaScript性能优化的核心是减少计算、避免阻塞、善用浏览器机制：缓存DOM访问、禁用生产环境console/debugger、合理管理闭包与事件监听、用Set替代数组查找、优化字符串操作。
JavaScript性能优化的核心是减少不必要的计算、避免阻塞主线程、合理利用浏览器机制。很多看似微小的代码习惯，会在高频执行或大数据量时明显拖慢速度。
避免在循环中重复计算或访问 DOM
每次访问 document.getElementById、element.style 或 offsetHeight 等属性，都可能触发浏览器强制重排（reflow）或重绘（repaint），开销很大。
- ❌ 错误写法：在 for 循环里反复查 DOM 或读取 layout 属性
- ✅ 正确做法：把 DOM 引用、尺寸值提前缓存到变量中
- ✅ 更进一步：批量修改样式时，用 cssText 或切换 class，而非逐个设 style
慎用 console.log 和 debugger
开发阶段方便，但上线后未移除的 console.log 在某些浏览器（尤其是旧版 Safari、部分 Android WebView）中会显著降低执行速度，特别是打印大对象时——它会同步序列化整个结构。
- ❌ 不建议在核心循环、动画帧（requestAnimationFrame）、高频事件中留 log
- ✅ 可封装一个环境感知的日志函数，生产环境自动禁用
- ✅ debugger 语句务必上线前清理，它会强制中断执行，破坏异步调度
减少闭包与长生命周期引用
闭包本身不慢，但若内部函数长期存在（如绑定在 DOM 上的事件监听器），且捕获了大对象（如整个 DOM 树、大数组），就会阻碍垃圾回收，导致内存持续增长，间接拖慢 GC 周期。
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“Java免费学习笔记（深入）”；
- ❌ 在循环中为每个元素创建闭包并保存大量上下文数据
- ✅ 使用事件委托替代为每个子元素绑定 handler
- ✅ 手动解绑不再需要的监听器，尤其在组件销毁时（React useEffect cleanup、Vue beforeUnmount）
- ✅ 避免在定时器回调中隐式保留对外部大对象的引用
警惕“看似无害”的数组与字符串操作
一些方法在数据量变大后性能断崖式下降，但日常测试不易察觉。
- ❌ arr.indexOf(x) / arr.includes(x)：O(n)，查 10 万项数组可能卡顿几十毫秒
- ✅ 替换为 Set.has(x)（O(1)），尤其用于去重、存在性判断
- ❌ str.split('').reverse().join('')：生成中间数组，内存和时间双开销
- ✅ 字符串反转可用双指针原地逻辑（转成数组再处理也比链式调用轻）
- ❌ 频繁拼接字符串用 +=：在 V8 早期版本中会多次分配内存
- ✅ 大量拼接优先用 Array.push + join 或模板字符串（现代引擎已优化，但仍需注意嵌套深度）
不复杂但容易忽略：性能问题往往不出现在“炫技”的地方，而藏在日志、循环、事件绑定和字符串处理这些每天都在写的细节里。
