代码层面如何减少性能瓶颈

避免重复计算，缓存结果更高效

写代码时经常遇到循环里反复调用同一个函数，比如在遍历数组时每次都计算字符串长度。这种写法看似没问题，但在数据量一大时就会拖慢速度。与其每次都要算一遍，不如把结果存起来。比如 JavaScript 中处理大量 DOM 元素时，提前把 document.querySelectorAll('.item') 的结果保存到变量，避免在循环中反复查询。

减少不必要的对象创建

很多人习惯在函数内部频繁创建临时对象或数组，尤其是回调函数里。这些短命对象会加重垃圾回收的负担，导致页面卡顿。比如在 React 渲染列表时，不要在 map 里写成 {items.map(() => <div key={...} style={{color: 'red'}}>...</div>)}，因为每次渲染都会新建一个 style 对象。应该把样式提到外面定义好，直接引用。

善用节流与防抖控制频率

用户滚动、输入、调整窗口大小这些操作触发非常频繁。如果不加控制，绑定的处理函数可能一秒执行几十次。比如监听搜索框输入，每敲一个字母就发请求，不仅浪费资源还容易让服务器崩溃。使用防抖技术，等用户停顿后再执行，体验和性能都能提升。

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(fetchSuggestions, 300));

优先使用原生方法

很多开发者喜欢自己实现数组去重、深拷贝等功能，但手写的逻辑往往效率不如浏览器内置的方法。比如用 Set 去重比遍历过滤快得多：[...new Set(arr)] 简洁又高效。再比如字符串拼接，老式写法用 += 在大量文本时很慢，改用 Array.join('') 或模板字符串更好。

减少重排与重绘

DOM 操作是性能黑洞之一。每次修改元素样式或位置，浏览器都可能重新计算布局（重排）甚至重绘整个页面。尽量批量修改，比如先把多个样式通过 class 一次性设置，而不是逐个更改 style.width、style.height。还可以利用 transform 和 opacity 实现动画，这些属性由 GPU 处理，不会触发重排。

异步任务别阻塞主线程

JavaScript 是单线程的，一段耗时的同步代码会让页面“冻结”。比如要处理上万条数据，直接跑循环会卡住用户交互。可以拆分成小块，用 setTimeout 或 queueMicrotask 分批执行，让出执行权给其他任务。

function processInChunks(data, callback) {
  const chunkSize = 100;
  let index = 0;

  function processChunk() {
    const end = Math.min(index + chunkSize, data.length);
    for (let i = index; i < end; i++) {
      callback(data[i]);
    }
    index = end;

    if (index < data.length) {
      setTimeout(processChunk, 0); // 让出主线程
    }
  }

  processChunk();
}

选择合适的数据结构

不是所有场景都适合用数组。比如需要频繁查找某个键是否存在，用 Array.includes() 时间复杂度是 O(n)，而 Set.has() 是 O(1)。同样，大量键值对操作时，Map 比普通对象更稳定，尤其在动态增删属性时表现更好。合理选型能让程序响应更快。