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

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

优化

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

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

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

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

我来解答赞 5 收藏

反馈

2 条解答

司徒惠泽 Lv1

在 WP 里面，这种情况我见得多了。全局变量确实是个大坑，特别是 JavaScript 部分。先说说 JS 的优化吧。

把那些必须共享的数据用一个单例模式封装起来，比如用个 StateManager 类来集中管理这些状态。代码大概长这样：

class StateManager {

  constructor() {

    this.state = {};

  }



  setState(key, value) {

    this.state[key] = value;

  }



  getState(key) {

    return this.state[key];

  }

}



const stateManager = new StateManager();

// 使用时

stateManager.setState('userInfo', { name: 'John' });

至于 CSS 变量跟 JS 交互慢的问题，建议用 window.getComputedStyle() 来获取值，而不是频繁直接操作 document.documentElement.style.setProperty 这种底层方法。

在 WP 主题开发里，我还习惯把一些不常用的配置放到本地存储里，用的时候再取出来。比如用户信息这种不怎么变的东西，可以用 localStorage 存着。

最后提醒一句，能不用全局变量就尽量别用，实在要跨模块通信，考虑用事件总线或者 React 那套 Context API（如果用了 React 的话）。改代码是麻烦，但比起内存泄漏和卡顿，这点麻烦算啥。

2026-03-26 08:00

诗语 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