현재 WebRTC와 three.js를 사용하여 프로젝트를 진행하면서, 프론트엔드 배포를 하니 크롬 브라우저에서 메모리 사용량이 최대 6.1GB를 사용하고 있다는 것을 알았다.
3D 모델을 사용하는 페이지 뿐만 아니라 일반적인 쇼핑몰 사이트 메모리 사용량은 500메가 내외인 반면에 프로젝트는 그의 12배에 해당한다.
[ 다오 서비스 메모리 사용량]
[ Three.js 메모리 사용량 ]
[ 무신사 메모리 사용량 ]
라운지 상세 페이지에서 오브제의 개수가 추가될수록 메모리 사용량이 증가할 것이다.
결론: 더 테스트를 해봐야겠으나, 50개까지는 오브제 수에 따라 크게 증가하지는 않음
WebGL을 사용하는 것 자체가 메모리를 많이 잡아먹을 것이다.
three.js를 통해서 모델을 불러오는 기능을 추가하기 전에는 메모리 사용량이 291MB였다.
하지만 three.js를 도입하고 나서 메모리 사용량을 체크하니 GB 단위로 뛰었다.
결론: 모델을 불러오는 과정에서 메모리가 많이 사용됨 → 모델 불러오는 과정을 최적화하기