JavaScript性能优化的核心是减少不必要的计算和渲染，关键在于缓存结果（如memoization）、按需执行（节流/防抖）、批量更新（DOM Fragment、React批处理）、避免强制同步布局（读写分离、requestAnimationFrame）。
JavaScript性能优化的核心是减少不必要的计算和渲染，关键在于缓存结果、按需执行、批量更新、避免强制同步布局。重复计算和无效渲染是前端卡顿最常见的根源。
用记忆化（Memoization）避免重复计算
对纯函数（相同输入总返回相同输出）的结果做缓存，尤其适用于递归、复杂数据处理或频繁调用的工具函数。
- 手动实现：用对象或Map缓存参数组合与结果，比如
fib(n)加一层cache[n]判断 - 使用库：Lodash的
_.memoize()可快速封装，支持自定义resolver提取关键参数 - React中：函数组件内用
useMemo()缓存派生状态，依赖数组不变则跳过重新计算
节流（Throttle）与防抖（Debounce）控制高频触发
用户滚动、输入、窗口缩放等事件可能每秒触发数十次，直接响应会导致大量冗余计算和渲染。
- 节流：固定时间间隔最多执行一次（如滚动时每100ms更新一次吸顶状态）
- 防抖：最后一次触发后等待N毫秒再执行（如搜索框输入完300ms再发请求）
- 原生可用
setTimeout手写，也可用lodash.throttle/lodash.debounce
批量DOM操作与虚拟DOM更新
直接多次修改DOM会触发多次重排重绘；框架中频繁setState也可能导致不必要渲染。
立即学习“Java免费学习笔记（深入）”；
- 手动操作DOM时：用
documentFragment暂存节点，一次性append；或用display: none隐藏后再批量修改 - React中：合并多个
setState（v18默认开启自动批处理），或用useReducer统一管理状态变更 - 避免在render中执行耗时逻辑，把计算提前到事件处理或useEffect中完成
避免强制同步布局（Forced Synchronous Layout）
读取布局相关属性（如offsetHeight、getBoundingClientRect()）后立刻写样式，会迫使浏览器立即计算样式和布局，打断渲染流水线。
- 读写分离：把所有读操作集中在一起，所有写操作放在后面
- 用
requestAnimationFrame延迟读取，确保在浏览器下一次重绘前执行 - 用
getComputedStyle替代部分属性访问，或用CSS自定义属性+element.animate()减少JS干预
