17370845950

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也可能导致不必要渲染。

• 手动操作DOM时：用documentFragment暂存节点，一次性append；或用display: none隐藏后再批量修改
• React中：合并多个setState（v18默认开启自动批处理），或用useReducer统一管理状态变更
• 避免在render中执行耗时逻辑，把计算提前到事件处理或useEffect中完成

避免强制同步布局（Forced Synchronous Layout）

读取布局相关属性（如offsetHeight、getBoundingClientRect()）后立刻写样式，会迫使浏览器立即计算样式和布局，打断渲染流水线。

• 读写分离：把所有读操作集中在一起，所有写操作放在后面
• 用requestAnimationFrame延迟读取，确保在浏览器下一次重绘前执行
• 用getComputedStyle替代部分属性访问，或用CSS自定义属性+element.animate()减少JS干预