了解現代Web應用程序中的內存洩漏：無聲績效殺手-js教程-PHP中文網

了解現代Web應用程序中的內存洩漏：無聲績效殺手

Barbara Streisand

發布： 2025-01-28 16:35:09

原創

577 人瀏覽過

Understanding Memory Leaks in Modern Web Applications: The Silent Performance Killers

隨著時間的流逝，Web應用程序會放慢速度？用戶抱怨性能緩慢和高度記憶消耗？您可能面臨著網絡性能的無聲殺手：內存洩漏。本文探討了這個經常被忽視的問題。

什麼是內存洩漏？ 在Web應用程序中，當您的應用程序保留不再需要的對象時，就會發生內存洩漏。這樣可以防止JavaScript的垃圾收集器收回內存，從而導致性能降解。 內存洩漏的常見原因

1。持續的事件聽眾：

>忘記刪除事件聽眾是經常出現的罪魁禍首。以下示例說明了這一點：

該解決方案涉及正確的清理：

function setupHandler() {
  const button = document.getElementById('myButton');
  const heavyObject = {
    data: new Array(10000).fill('?')
  };

  button.addEventListener('click', () => {
    console.log(heavyObject.data);
  });
}

// Adds a new listener every 2 seconds – a leak!
setInterval(setupHandler, 2000);

登入後複製

2。 React的

function setupHandler() {
  const button = document.getElementById('myButton');
  const heavyObject = {
    data: new Array(10000).fill('?')
  };

  const handler = () => {
    console.log(heavyObject.data);
  };

  button.addEventListener('click', handler);

  return () => button.removeEventListener('click', handler);
}

let cleanup = setupHandler();
setInterval(() => {
  cleanup(); 
  cleanup = setupHandler(); 
}, 2000);

登入後複製

陷阱：

useEffect在React中，忽略內的清理功能可能會導致洩漏：

更正的實現：useEffect

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await api.getData();
      setData(response); // Leak: updates state after unmount
    };

    fetchData();
  }, []); 
}

登入後複製

3。關閉握在大物體上：

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isSubscribed = true;
    const fetchData = async () => {
      const response = await api.getData();
      if (isSubscribed) setData(response);
    };
    fetchData();
    return () => { isSubscribed = false; };
  }, []);
}

登入後複製

封閉可以無意間保留大物體：

檢測內存洩漏

function createLargeObject() {
  return new Array(1000000).fill('?');
}

function setupHandler() {
  const largeObject = createLargeObject();
  return () => { console.log(largeObject.length); };
}

const handler = setupHandler(); // largeObject persists

登入後複製

> chrome devtools：

> OPEN DEVTOOLS（F12）。 >導航到“內存”選項卡。

比較快照以識別保留的對象。

// Memory usage helper
function debugMemory() {
  console.log('Memory:', performance.memory.usedJSHeapSize / 1024 / 1024, 'MB');
}

登入後複製

資源清理：始終刪除事件偵聽器，清晰的間隔/超時，取消網絡請求和關閉連接。

> ：>使用這些用於連接元數據而無需阻止垃圾收集。
REACT清理：始終將清理功能包含在WeakMap鉤中。 WeakSet
用於內存洩漏檢測的工具> useEffect

react devtools profiler 堆快照分析儀

結論

// Simple memory monitoring
function monitorMemory(fn) {
  const start = performance.memory.usedJSHeapSize;
  fn();
  const end = performance.memory.usedJSHeapSize;
  console.log('Memory diff:', (end - start) / 1024 / 1024, 'MB');
}

登入後複製

進一步讀取： MDN Web文檔：內存管理

chrome devtools內存profiler文檔

> React內存管理最佳實踐

以上是了解現代Web應用程序中的內存洩漏：無聲績效殺手的詳細內容。更多資訊請關注PHP中文網其他相關文章！