7. 크롬 개발자 도구를 활용한 애플리케이션 분석

• 개인정보 보호 모드에서는 각종 확장 프로그램이 실행되지 않아 디버깅하기 수월하다.

• 힙 스냅샷

  • 현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구

  • 얕은 크기, 유지된 크기

    • 얕은 크기 : 객체 자체가 보유하는 메모리 바이트의 크기

    • 유지된 크기 : 해당 객체 자체뿐만 아니라 다른 부모가 존재하지 않는 모든 자식 객체들의 크기까지 더한 값

    • var counter = 0;
      var instances = [];
      
      function Y() {
        this.j = 5;
      } // 얕은 크기 : 48%, 유지된 크기 : 48%
      
      function X() {
        this.i = counter++;
        this.y = new Y();
      }
      // 얕은 크기 : 52%, 유지된 크기 : 100%
      // 48% 차이 = 객체 자체가 참조를 보유하고 있는 Y 객체의 크기
      
      export default function App() {
        function handleClick() {
          instances.push(new X());
        }
      }
      
      return <button onClick={handleClick}>+</button>;

  • 메모리 누수를 찾을 때는 얕은 크기는 작지만 유지된 크기가 큰 객체를 찾아야 한다.

    • 다수의 다른 객체를 참조하고 있다는 뜻
    • 이런 객체가 오랜 시간 메모리에 남아 있다면 많은 메모리를 점유하게 된다.

7강은 실습 위주의 파트라 정리 양이 많지 않습니다.