웹/배경지식

Google Chrome Memory Terminology

한땀코딩 2023. 6. 18. 10:05

크롬 개발자 도구: Memory

최근에 코드 내 메모리 사용량을 알아보던 도중 크롬 개발자 도구 문서에서 메모리 관련 용어를 정리해 둔 것을 발견하여 가볍게 읽어보았습니다. 생각보다 V8 엔진에 대해서 알아야 하는 것도 많고 생소한 용어도 많아서 간단하게 이해한 부분과 더 학습이 필요할 거 같은 부분을 정리해 보았습니다.

Memory terminology - Chrome Developers

Object Sizes

생성되는 객체의 사이즈는 heap profiler에서 확인이 가능한데, shallow size와 retained size가 있습니다.

  • shallow size: 객체가 직접 안고 있는 메모리 크기
    • 보통 배열과 문자열이 shallow size가 크다고 합니다. 또한 주 저장소가 renderer memory인 경우가 많습니다.
    • renderer memory: 지켜보고 있는 페이지가 render 될 때 사용되는 process 내 메모리. native memory + 페이지의 JS heap memory + 워커들이 사용하는 JS heap memory의 합이라고 보면 됩니다.
  • retained size: GC roots에서 접근이 불가하게 될 때 해제되는 메모리의 크기
    • GC roots: native code에서 자바스크립트 객체를 연결하기 위한 handle로 구성되어 있습니다. 굉장히 다양한 GC roots가 있지만 일반적으로 익숙하게 알려진 것들은 Window global 객체, DOM tree, debugger context, DevTools console가 있습니다.

Objects retaining tree

heap이란 그래프 형태로 되어 있는, 관련된 객체들의 네트워크라 볼 수 있습니다. 흔히 아는 tree처럼 node와 edge로 구성되어 있습니다.

V8 specifics

  • 참조값이 없는 원시 데이터 타입 (number, boolean, string)은 언제나 end node입니다.
  • native object: JS heap에 없는 다른 모든 것을 의미합니다. V8 가비지 콜렉터(GC)가 관리하지 않습니다. JS wrapper object를 활용해서 JavaScript로만 접근이 가능합니다.
  • Cons string: 저장된 문자열들을 합친 구조의 문자열
  • Arrays: 우리가 흔히 아는 배열로, key-value 형태의 데이터도 배열을 근간으로 구성되어 있습니다.
  • Map: fast property access를 위한 객체 계층 구조를 설명하기 위해 사용됩니다.

더 탐구가 필요한 영역

막상 정리를 하면서도 굉장히 생략된 점도 많고, V8 자체에 대해서는 심도 있게 학습을 해본 적이 없기 때문에 이해를 못 한 부분이 많은 거 같습니다. 특히 읽으면서 아래의 내용은 별도로 조금 더 공식 문서를 읽어보면 좋을 거 같습니다.

  • dominator
  • V8 엔진에서의 wrapper 객체 vs native 객체의 저장 및 차이
  • fast property access