React native에 사용되는 Hermes Engine
RN개발을 진행하면서 실제적으로 적용되는 헤르메스 엔진에 대해서 모르고 있다가 이번에 내용을 정리하려고 합니다.
헤르메스 엔진이란?
리액트 네이티브 공식 문서에 헤르메시를 사용한다고 명시되어있는데, 여기서도 헤르메스에 대해서 설명하고있습니다.
한마디로 리액트 네이티브를 위한 최적화된 오픈소스 자바스크립트 엔진이라고 합니다.
주요 기능으로는,
1. 시작시간 향상
2. 메모리 사용량 감소
3. JavaScriptCore와 비교해서 앱 사이즈가 더 작음
* JavaScriptCore는 RN 0.70 이전에 사용됬던 방식
번들버전의 헤르메스를 리액트 네이티브에서 사용하게 되는데 리액트 네이티브 버전에 따라서 헤르메스 버전과 완벽 호환되기 때문에 이전에 문제가 발생했던 부분은 해결되었다고 하네요. 문제가 발생하면 비활성화해서 처리할 수 있다고합니다.
헤르메스 엔진 공식 사이트에 들어가보니 리액트 네이티브 관련 엔진에 사용될 뿐아니라, 가상머신이나 웹어셈블리(Emscripten)같은 다른 부분에서도 사용할 수 있는것 같습니다.
https://hermesengine.dev/docs/building-and-running
Building and Running | Hermes
This document describes how to build and run Hermes as a standalone compiler and VM. To use Hermes in the context of a React Native app, see the React Native documentation.
hermesengine.dev
헤르메스 엔진에서의 메모리 프로파일러
공식 문서에 보면 헤르메스 엔진을 통해서 메모리 프로파일링이 가능합니다.
프로파일링을 통해서 메모리 사용량이 어떤부분에서 과부화되고있거나 이런 부분을 통해서 최적화를 진단하면서 개발을 할 수 있다고 생각됩니다. 실제로 적용해보지는 못햇지만 추후 실무에서 RN앱으로 서비스를 출시하고 유지보수 기간동안 작업해볼 기회가 있다면 꼭 해볼 생각입니다.
헤르메스에서는 특정 시점을 기록한 메모리 힙 스냅샷을 통해서 보여주게 되고 사용되는 노드는 힙의 값, 노드의 엣지부분들은 다른 노드의 포인터라고 합니다. 연결리스트처럼 머리속으로 생각하면되지않을까 합니다(?)
헤르메스 메모리 스냅샷을 통해서, 어떤 타입을 사용중이고, 얼마나 많은 메모리 사용량을 가지고, 불필요하게 유지되는 메모리도 확인할 수 있습니다.
여기서 개념적인 부분을 설명드리자면,
아까 말한 노드의 엣지부분을 통해서 다른 노드의 유지 계속 유지할지를 결정할 수 있고 예시로 A-> B -> C 로 힙 메모리 스냅샷 엣지로 이루어진경우 3개 중 하나가 가비지 컬렉션이 되지않는다면 전부 활성화 상태라고 할수있고 하나라도 가비지 컬렉션이 된다면 전부 가비지컬렉션으로 처리된다고 합니다.
헤르메스도 V8엔진으로 사용되는 형식과 동일하고 JSON으로 스냅샷을 형성하기때문에 개발자 도구를 통해서 처리할 수 있다고 합니다.
* 리액트 네이티브 헤르메스 크롬 개발자 도구 설정 법
https://reactnative.dev/docs/next/hermes#debugging-js-on-hermes-using-google-chromes-devtools
Using Hermes · React Native
Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.
reactnative.dev
RN문서에서도 헤르메스를 이용해서 프로파일링이 가능합니다
https://reactnative.dev/docs/profile-hermes
Profiling with Hermes · React Native
You can visualize JavaScript's performance in a React Native app using Hermes. Hermes is a small and lightweight JavaScript engine optimized for running React Native (you can read more about using it with React Native here). Hermes helps improve app perfor
reactnative.dev
* 헤르메스가 적용되어있는지 확인방법
const isHermes = () => !!global.HermesInternal;
이 부분을 코드 어딘가에 넣어서 실행해보면 헤르메스 엔진을 사용중인지 확인할 수 있습니다.
헤르메스 엔진으로 크롬 브라우저에서 메모리 프로파일링 사용해보기
먼저 공식문서대로, chrome://inspect에 들어가 보통은 로컬환경에서 8081포트로 사용되니 등록해주면 아래와 같이 타겟들이 뜨게 됩니다.
insepect를 누르면 실제로 크롬 브라우저 팝업창이 뜨게 되고, 메모리 관련 탭으로 이동해서 스냅샷 촬영을 진행하면 다음 아래와 같이 메모리 usage들이 뜨게 됩니다.
위에서 실제로 가치있는 정보를 찾아보자면 QA 커뮤니티 작업을 진행하고있는데 아래와 같이 어느정도 메모리가 사용되었는지 알수 있습니다.
