JavaScript性能优化的核心是减少执行时间、降低内存占用、避免阻塞主线程，关键在于让代码更“懂浏览器”：减少重排重绘、善用事件委托与节流防抖、按需加载、避开innerHTML循环等常见陷阱。
JavaScript性能优化的核心是减少执行时间、降低内存占用、避免阻塞主线程。关键不在于写得多炫酷，而在于让代码更“懂浏览器”。
减少重排（Reflow）和重绘（Repaint）
每次修改DOM样式（尤其是几何属性如width、top、height）都可能触发重排，代价很高。批量操作DOM能显著提速。
- 用
documentFragment暂存多个节点，一次性插入 - 读取布局信息（如
offsetHeight）前，先完成所有样式修改，避免“强制同步布局” - 对频繁变化的元素，用
transform和opacity代替left/top或visibility，它们走合成层，不触发布局
善用事件委托与节流防抖
大量子元素绑定相同事件监听器，既浪费内存又拖慢初始化。滚动、输入、鼠标移动等高频事件若不加限制，会持续挤压主线程。
- 用父容器监听事件，通过
event.target判断实际目标（事件委托） - 滚动搜索框输入建议：用
debounce延迟执行请求，比如等用户停顿300ms后再查 - 窗口缩放适配：用
throttle控制每100ms最多执行一次尺寸计算
按需加载与代码分割
首屏不需要的逻辑，别急着执行。大函数、第三方库、复杂组件，该懒就懒。
立即学习“Java免费学习笔记（深入）”；
- 用
async/defer加载非关键脚本，避免阻塞HTML解析 - 动态
import()实现路由级或组件级代码分割（如React中React.lazy） - 数据量大时，用
requestIdleCallback在浏览器空闲时段处理非紧急任务（如日志上报、预加载）
避开常见性能陷阱
有些写法看着简洁，实则暗藏开销。识别它们比盲目优化更重要。
- 避免在循环中反复调用
innerHTML或appendChild；改用字符串拼接+单次赋值，或DocumentFragment - 慎用
console.log调试——尤其在循环或动画帧中，它可能意外阻塞渲染 - 长列表渲染不用
v-for或map全量生成；启用虚拟滚动（virtual scroll），只渲染可视区域项
不复杂但容易忽略。真正快的代码，往往是从删减开始的。
