全局变量太多导致内存占用高，该怎么优化？

IT人欣怡提问于 2026-03-19 15:40:24 阅读 5

优化

最近做项目时发现页面越用越卡，打开性能面板一看内存快爆了。我猜是因为在多个 JS 文件里用了不少全局变量存状态，比如用户信息、配置项这些。试过把部分数据移到闭包里，但有些地方又得跨模块访问，改起来很麻烦。

比如下面这段 CSS 里定义的全局样式变量，是不是也会加重内存负担？虽然知道 CSS 变量本身不占 JS 内存，但配合 JS 动态修改的时候感觉特别慢：

:root {
  --primary-color: #3498db;
  --sidebar-width: 240px;
  --transition-speed: 0.3s;
  --font-size-base: 16px;
}

有没有更合理的方案来管理这些“全局”数据，既能减少内存泄漏风险，又不影响组件间通信？

我来解答赞 5 收藏

反馈

1 条解答

诗语 Lv1

CSS变量不占JS内存，这个锅它不背。内存问题大概率是你那些全局变量没及时清理，或者闭包形成的引用链无法被GC回收。

直接上方案：用IIFE或者ES Module搞个单例状态管理器，比满世界挂全局变量干净多了：

// state.js - 唯一全局变量

const AppState = (function() {

  const state = {

    user: null,

    config: {},

    cache: new Map()

  };

  

  return {

    get(key) {

      return state[key];

    },

    set(key, value) {

      state[key] = value;

    },

    // 用完手动清，避免内存泄漏

    clear(key) {

      if (state.cache instanceof Map) {

        state.cache.delete(key);

      }

      state[key] = null;

    }

  };

})();



// 各模块直接引用

AppState.set('user', { name: 'test' });

const user = AppState.get('user');

或者更省事点，直接用WeakMap做缓存，自动回收不用你管。实在不行就上Redux/Zustand这类现成方案，别自己造轮子。

2026-03-19 16:00