GoJS 메모리 누수(Memory leak)와 성능 개선

개요

현재 사내 프로젝트를 개발하는데 특정 시나리오에서 과도한 메모리 점유율로 성능 저하가 발생하고 있습니다.

 

해당 시나리오에 대해 성능 프로파일링을 진행한 결과 프로젝트에서 사용하고 있는 GoJS 라이브러리가 메모리 누수 원인으로 판된되어 GoJS 에서 발생하는 메모리 누수와 개선 과정에 대해 기술하려 합니다.

 

성능

크롬 개발자 도구로 위 시나리오에서 진행한 성능 프로파일링 지표를 확인해보았습니다.

 

* 시나리오 순서

1. GoJS 다이어그램 생성화면 진입
2. 다수 컴포넌트 생성
3. 화면 벗어남

위 과정을 3번 반복하고 퍼포먼스를 측정합니다.

 

이미지 1

JS Heap(파란 그래프)은 자바스크립트에서 동적으로 할당된 객체와 변수들이 저장되는 메모리 영역을 의미합니다.
이 영역은 자바스크립트의 가비지 컬렉터에 의해 관리되며, 사용하지 않는 개체들이 수거되어 메모리가 회수합니다.
JS Heap의 크기는 사용 중인 객체의 총 메모리 사용량을 나타냅니다.

 

빨간 박스 영역은 다이어그램 화면에서 컴포넌트를 조작할 때 변경되는 메모리인데, 박스 영역 안의 메모리 증감은 계단형 유동이 아닌 것을 확인할 수 있습니다.

 

JSHeap은 다이어그램 페이지에 진입하고 나온 경우 일정 수치가 증가해 유지되고 있습니다.

 

컴포넌트를 조작하지 않고 다이어그램 화면을 오가는 동작을 반복하여 성능 프로파일링을 진행한 결과는 다음과 같습니다.

 

이미지 2

JS Heap이 이상적인 메모리 누수 패턴을 보여주고 있습니다.

 

개선

GoJS에서 성능상 이슈를 발생시키는 다양한 요인 중 현재 이 프로젝트에 해당하는 항목들을 위주로 개선하여 다시 성능 프로파일링을 진행해보았습니다.

 

UndoManager

GoJs 개발사인 Northwoods Software 포럼에는 관련된 쓰레드가 다수 존재합니다.

 

노스우드 소프트웨어의 walter는 GoJs에서 memory retension이 발생하는 분명한 이유는 UndoManager를 사용하고 있기 때문이라고 답변합니다.

 

UndoManager란?
GoJs의 UndoManager는 그래프와 다이어그램의 상태를 관리하고, 사용자가 특정 동작을 실행하거나 취소할 수 있도록 지원하는 기능을 제공하는 클래스입니다.
사용자 인터랙션과 관련하여 그래프의 변경 사항을 기록하고, 이를 통해 실행 취소 및 다시 실행할 수 있는 메커니즘을 제공합니다.

 

Diagram에 대한 참조

GoJs Diagram xxx Listener 메서드에 대한 참조를 사용하는 경우 그에 대한 remove를 하지 않을 시 memory leak가 발생할 수 있다고 언급하고 있습니다.

 

HTML DIV 요소와 Diagram 연결 해제

Diagram이 있는 Div를 포함하는 HTML DOM의 일부를 제거하는 경우, Diagram.div 설정을 null로 할당하지 않으면 가비지 컬렉터가 메모리를 수집하지 않을 수 있습니다.

 

결과

위 3가지 항목에 대해 수정 후 2-1 결과의 하단 시나리오(다이어그램 화면 <-> 다른화면)로 성능 프로파일링을 진행하였습니다.

 

이미지 3

이미지 2 와 비교했을 때 JS Heap의 계단형 유동이 많이 줄었고 안정적인 증감 모습을 보이고 있습니다.

 

참고

https://gojs.net/latest/intro/performance.html - GoJS performance considerations

https://forum.nwoods.com/ - Northwoods Software Forum

https://gojs.net/latest/api/index.html - GoJS API