집 > 기사 > 웹 프론트엔드 > JS 메모리 누수가 발생하면 어떻게 해야 합니까? JS 메모리 누수를 방지하는 방법은 무엇입니까?

JS 메모리 누수가 발생하면 어떻게 해야 합니까? JS 메모리 누수를 방지하는 방법은 무엇입니까?

藏色散人앞으로: 2021-08-05 14:58:492300검색

많은 개발자는 일반적으로 자신이 유지 관리하는 페이지에 메모리 누수가 있는지 여부에 대해 신경 쓰지 않을 수 있습니다. 그 이유는 단순한 페이지 메모리 누수가 처음에는 매우 느리고 심각한 지연이 발생하기 전에 사용자가 새로 고칠 수 있기 때문일 수 있습니다. . 숨겨져 있지만 페이지가 점점 더 복잡해짐에 따라, 특히 페이지가 SAP 모드에서 상호 작용할 때 숨겨진 메모리 누수 위험은 점점 더 심각해지며 어느 날 갑자기 사용자가 다음과 같이 보고했습니다. "페이지가 잠시 후 중단됩니다. 왜 작동하는지 모르겠습니다. 이전에는 이렇지 않았습니다.”

이 글에서는 몇 가지 간단한 예를 통해 메모리 누수 조사 방법을 소개하고, 메모리 누수의 원인과 일반적인 상황을 요약하고, 각 상황별로 메모리 누수를 방지하는 방법을 요약합니다. 모두에게 도움이 되기를 바랍니다.

추천 동영상: "JavaScript Basics Tutorial"

1. 간단한 예

먼저 이 예에 해당하는 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>memory-leak</title>
  </head>
  <body>
    <p>push date for <button>0</button> times</p>
    <p>add Date: <button>add date</button></p>
    <p>clear: <button>clear</button></p>
    <script>
      const pushDate = document.querySelector(".push-date");
      const dateCount = document.querySelector(".count-date");
      let dateAry = [];
      let dateNum = 0;
      // 【写入 date】
      pushDate.addEventListener("click", () => {
        dateCount.innerHTML = `${++dateNum}`;
        for (let j = 0; j < 3000; ++j) {
          dateAry.push(new Date());
        }
      });
      const clear = document.querySelector(".clear");
      // 【回收内存】
      clear.addEventListener("click", () => {
        dateAry = [];
        dateCount.innerHTML = "0";
      });
</script>
  </body>
</html>

Code 1

Code 1 논리는 매우 간단합니다. "날짜 추가" 버튼을 클릭하면 3000개의 새로운 Date 객체가 dateAry 배열로 푸시되고 "지우기" 버튼을 클릭하면 dateAry가 지워집니다. 분명히 "날짜 추가" 작업으로 인해 메모리 사용량이 계속 증가하게 됩니다. 이 로직을 실제 애플리케이션에서 사용하면 메모리 누수가 발생하게 됩니다(이와 같은 코드 로직의 의도적인 설계에 관계없이). 메모리 증가의 원인과 메모리 누수를 찾는 방법을 살펴보세요.

1 힙 스냅샷

브라우저 플러그인의 간섭을 피하기 위해 크롬에 새로운 시크릿 창을 만들어 위 코드를 엽니다. 그런 다음 Chrome 개발자 도구의 메모리 도구에서 "힙 스냅샷" 도구를 찾아 왼쪽 상단에 있는 기록 버튼을 클릭하여 스냅샷을 기록한 다음 "날짜 추가" 버튼을 클릭하고 수동으로 GC(Garbage Collect)를 트리거한 후 기록합니다. a 스냅샷을 다시 얻으려면 그림 1과 같이 위 작업을 여러 번 반복하십시오.