内存泄漏排查

let obj = { name: 'test' }; // 引用计数 = 1
let ref = obj;              // 引用计数 = 2
obj = null;                 // 引用计数 = 1
ref = null;                 // 引用计数 = 0 → 可回收

function createCycle() {
  const a = {};
  const b = {};
  a.ref = b;
  b.ref = a;
  // 函数执行完后，a 和 b 互相引用，计数永远不为 0
}

function processData() {
  // 忘记 let/const，变量挂到 window 上
  leakedData = new Array(1000000).fill('x');
}

// 或者 this 指向 window
function Handler() {
  this.cache = new Map(); // 非严格模式下 this === window
}
Handler(); // 没有 new

// 组件挂载时设置了定时器
const timer = setInterval(() => {
  const node = document.getElementById('status');
  if (node) {
    node.textContent = fetchStatus();
  }
}, 1000);

// 组件卸载时忘记清除
// clearInterval(timer) ← 缺少这行

class VideoPlayer {
  constructor(element) {
    this.element = element;
    this.buffer = new ArrayBuffer(50 * 1024 * 1024); // 50MB

    // 绑定了事件但从未解绑
    window.addEventListener('resize', this.handleResize.bindthis));
  }

  handleResize() {
    this.element.style.width = window.innerWidth + 'px';
  }

  destroy() {
    this.element.remove();
    // 忘记 removeEventListener
    // window 仍然持有对 this.handleResize 的引用
    // 进而持有对整个实例（包括 50MB buffer）的引用
  }
}

function createProcessor() {
  const hugeData = loadHugeDataset(); // 100MB 数据

  return function process(item) {
    // 只用到了 item，但闭包捕获了整个作用域
    return item.id;
  };
}

const processor = createProcessor();
// hugeData 永远不会被回收，因为 processor 的闭包作用域持有它

function createProcessor() {
  let hugeData = loadHugeDataset();
  const index = buildIndex(hugeData);
  hugeData = null; // 显式释放

  return function process(item) {
    return index.get(item.id);
  };
}

let detachedTree;

function createList() {
  const ul = document.createElement('ul');
  for (let i = 0; i < 10000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    ul.appendChild(li);
  }
  // 存储了引用但没有插入文档
  detachedTree = ul;
}

function removeList() {
  document.getElementById('container').innerHTML = '';
  // detachedTree 仍然持有整棵 DOM 树的引用
}

function fetchUserData(userId) {
  // 每次路由切换都发起请求，但从不取消之前的
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(data => {
      // 组件可能已经卸载，但回调仍在执行
      this.setState({ userData: data });
    });
}

function fetchUserData(userId, signal) {
  return fetch(`/api/users/${userId}`, { signal })
    .then(res => res.json());
}

// 组件卸载时
const controller = new AbortController();
fetchUserData(userId, controller.signal);
// cleanup
controller.abort();

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket(`wss://chat.example.com/${roomId}`);

    ws.onmessage = (event) => {
      setMessages(prev => [...prev, JSON.parse(event.data)]);
    };

    // ❌ 缺少清理函数，组件卸载后 WebSocket 仍然活跃
    // return () => ws.close();
  }, [roomId]);

  return <MessageList messages={messages} />;
}

export default {
  mounted() {
    this.observer = new IntersectionObserver(this.handleIntersect);
    this.observer.observe(this.$refs.target);

    window.addEventListener('scroll', this.handleScroll);
    this.$eventBus.$on('data-update', this.handleUpdate);
  },
  // ❌ 缺少 beforeUnmount/beforeDestroy 清理
  // beforeUnmount() {
  //   this.observer.disconnect();
  //   window.removeEventListener('scroll', this.handleScroll);
  //   this.$eventBus.$off('data-update', this.handleUpdate);
  // }
};

// 每 5 秒输出一次内存使用情况
setInterval(() => {
  if (performance.memory) {
    const { usedJSHeapSize, totalJSHeapSize } = performance.memory;
    console.log(
      `Heap: ${(usedJSHeapSize / 1048576).toFixed(1)}MB / ${(totalJSHeapSize / 1048576).toFixed(1)}MB`
    );
  }
}, 5000);

class ImageCache {
  #cache = new Map();

  set(url, imageData) {
    // 使用 WeakRef，当 imageData 在其他地方不再被引用时可以被 GC
    this.#cache.set(url, new WeakRef(imageData));
  }

  get(url) {
    const ref = this.#cache.get(url);
    if (!ref) return undefined;

    const data = ref.deref(); // 获取目标对象，如果已被回收则返回 undefined
    if (!data) {
      this.#cache.delete(url); // 清理无效条目
      return undefined;
    }
    return data;
  }
}

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Object associated with "${heldValue}" was garbage collected`);
  // 执行清理：关闭文件句柄、释放外部资源等
});

function createManagedResource(name) {
  const resource = acquireExpensiveResource();
  registry.register(resource, name);
  return resource;
}

// React: 订阅和清理成对出现
useEffect(() => {
  const subscription = dataSource.subscribe(handleUpdate);
  return () => subscription.unsubscribe();
}, [dataSource]);

// ✅ 目标对象被回收时，关联数据自动释放
const metadata = new WeakMap();
metadata.set(domNode, { clickCount: 0 });

// ❌ 普通 Map 会阻止 domNode 被回收
const metadata = new Map();
metadata.set(domNode, { clickCount: 0 });

class LRUCache {
  #maxSize;
  #cache = new Map();

  constructor(maxSize = 100) {
    this.#maxSize = maxSize;
  }

  set(key, value) {
    if (this.#cache.has(key)) this.#cache.delete(key);
    this.#cache.set(key, value);
    if (this.#cache.size > this.#maxSize) {
      const firstKey = this.#cache.keys().next().value;
      this.#cache.delete(firstKey);
    }
  }
}