作用域优化真的能提升前端性能吗？我这样写有问题吗？

启腾 ☘︎ 提问于 2026-03-05 16:28:22 阅读 54

优化

最近在学性能优化，看到有人说减少全局变量、缩小作用域能提升性能。但我试了下，感觉没啥区别，是不是我理解错了？比如下面这段代码，我把变量提到外层想复用，但同事说反而更差了：

<script>
  let cache = {};
  function renderList(items) {
    const fragment = document.createDocumentFragment();
    items.forEach(item => {
      const el = document.createElement('div');
      el.textContent = cache[item.id] || (cache[item.id] = item.name);
      fragment.appendChild(el);
    });
    document.body.appendChild(fragment);
  }
</script>

这种写法是不是反而让 cache 一直占着内存？作用域到底该怎么优化才对？

我来解答赞 1 收藏

反馈

1 条解答

Dev · 向景 Lv1

你这个例子确实有点问题。作用域优化确实能提升性能，但不是这么用的。

先说你代码的问题：把cache放在全局作用域确实会让它一直占用内存，而且完全没必要。每次renderList调用都共享同一个cache对象，这容易造成内存泄漏。

性能优化的正确姿势是这样的：

1. 变量能放局部作用域就别放全局，局部变量在函数结束后就能被回收
2. 高频调用的函数里，避免重复创建对象（比如每次循环都new Array就不好）
3. 缓存要用在真正需要的地方，比如计算量大的操作

我给你改一下代码：

function renderList(items) {

  const fragment = document.createDocumentFragment();

  const localCache = {}; // 放在函数作用域

  

  items.forEach(item => {

    const el = document.createElement('div');

    el.textContent = localCache[item.id] || (localCache[item.id] = item.name);

    fragment.appendChild(el);

  });

  

  document.body.appendChild(fragment);

}

这样改的好处：
- cache变成局部变量，函数执行完就能被GC回收
- 依然保持了缓存效果，避免重复计算item.name
- 不会污染全局作用域

作用域优化真正的性能提升在于：
- 减少作用域链查找（局部变量比全局变量查找快）
- 减少内存占用（及时释放不需要的变量）
- 避免命名冲突（这是副作用）

不过说实话，现代JS引擎优化得很好，这种微观优化可能感知不强。更值得关注的是减少DOM操作、避免强制同步布局这类大头开销。

2026-03-05 17:00