JS性能优化核心在于控制执行频率、减少无效计算、卸载密集任务和保障精度。节流用于连续事件,防抖用于输入场景;优先轻量判断跳过冗余运算;超10ms任务移交Web Worker;金额用整数运算,高精度用decimal.js,大整数用BigInt。

JS 数值计算本身很快,真正拖慢体验的,是高频触发、重复执行、缺乏防护的叠加效应。工程落地时,关键不在“算得多快”,而在“要不要算”和“什么时候算”。
控制执行频率:节流与防抖按场景选
滚动、缩放、拖拽等连续事件,适合用节流(throttle)——设定最小间隔(如 50ms),保证定期更新但不过载;输入框实时校验、搜索联想、格式化,则更适合防抖(debounce)——等用户停顿 200–400ms 后再执行,避免中间大量无效计算。
- scroll 中计算可视区域元素位置?每 50ms 最多更新一次布局数据
- 金额输入框实时加千分位?防抖后调用 parseFloat + toFixed,减少类型转换次数
- 避免 setTimeout 嵌套实现节流,推荐时间戳 + 定时器组合,更稳定可靠
减少无效计算:轻量判断优先于完整运算
不是每次都要跑完全部逻辑。加一层低成本检查,就能跳过大量冗余工作。
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 输入值未变(prev === current)、为 NaN/Infinity、超出业务有效范围?直接 return
- 遍历数组做统计?用 some() 或 every() 提前退出,不用非得走完全部元素
- 公式含多个步骤?拆成中间变量,用布尔标记缓存结果,相同参数复用输出
卸载密集任务:超 10ms 运算移出主线程
FFT 分析、矩阵乘法、金融模型迭代这类耗时操作,别卡在 UI 线程。Web Worker 是标准解法。
- 把纯计算逻辑封装成独立脚本,只传 Number 或 TypedArray(如 Float64Array),传输成本低
- Worker 不能访问 DOM,所有依赖必须序列化传递,计算结果通过 postMessage 回传
- 示例:实时音视频处理中的频谱计算、大规模坐标批量投影转换
保障计算精度:按需选择数值表示方案
0.1 + 0.2 !== 0.3 不是 bug,而是 IEEE 754 的必然表现。应对策略要分层:
- 金额类场景:统一转为整数(元→分),全程整数运算,最后还原
- 展示层格式化:用 (val).toFixed(2) 得字符串,再 parseFloat() 转回数字,仅用于显示
- 高精度逻辑:用 decimal.js 或 big.js,支持任意精度四则、幂、开方等
- 超大整数(如区块链地址、哈希):用 BigInt(后缀 n 或 BigInt() 构造),注意不可与 Number 混用

















