요즘 Flutter 보다 iOS에 집중하고 있어서 Flutter에는 손이 잘 안가지만 예전에 작업했을 때 Performance View 를 사용했던 경험을 까먹을까봐 기록하려한다.

만약 어떤 앱을 다운받았는데 버벅이고 끊기면 누구라도 그 앱을 사용하기 싫어질 것이고, 평가도 좋지 못할 것이다. 사람마다 취향이 다르고 관점도 다르기 때문에 누구한테는 좋은 앱, 누구한테는 좋지 못한 앱이 될 수 있다. 하지만 앞에서 말한 것처럼 앱 퍼포먼스가 떨어진다면 사용해서 판단하기 전에 삭제할 가능성이 높기에 우리는 어떤 앱을 만들던 앱 퍼포먼스를 확인해서 완성도를 높여야 할 필요가 있다.

Using the Performance View

Flutter 에서는 앱을 실시간으로 모니터링해주는 Performance Profiling 도구를 제공하는데 퍼포먼스를 차트로 직접 볼 수 있다. 사용법은 profile 모드로 실행하고, Dart DevTools 를 키면 된다. (실기기로는 켜지는데 시뮬레이터로는 켜지지 않는 것 같다.)

막대 차트에는 크게 3가지가 확인이 가능하다.

UI

Dart VM을 통해 Dart 코드를 실행하는 스레드입니다. 여기에는 Flutter 프레임워크뿐만 아니라, 애플리케이션의 코드도 포함됩니다. Widget Tree를 Layer Tree로 변환하고 렌더링할 Raster 스레드로 보내는 역할을 합니다.

Raster

Raster 스레드는 Layer Tree를 가져와 GPU와 통신하여 UI를 업데이트 합니다. Raster 스레드, 해당 데이터에 직접 액세스할 수 없다. Skia engine이 이 스레드에서 실행됩니다.

Jank (slow frame)

프레임 차트에 버벅거림이 빨간색 오버레이와 함께 표시되는데, ~16ms 이상 걸리는 경우 버벅거림으로 간주된다. (60FPS 장치에 해당), 60FPS의 프레임 렌더링 속도를 달성하려면 각 프레임이 ~16ms 이하로 렌더링되어야 한다. 이 이상으로 올라가면 UI가 버벅거리거나 프레임 손실이 발생할 수 있다. (렌더링 시간이 짧으면 짧을수록 좋습니다.)

그 밖에도 많은 정보들을 확인할 수 있는데 자세한 내용은 공식문서 를 참고하자.

성능 개선 방법

• build 메소드는 UI가 변경되면 다시 호출될 수 있는 함수라서 build 에 비용이 많이 드는 작업을 하면 안된다.
• 위젯을 여러개로 나누자. 위젯안의 메소드를 나누는 건 아무런 도움이 안되고 큰 위젯을 여러개의 위젯으로 나눠야 한다.
• const를 도전적으로 사용하자. 위젯을 const로 선언해서 작성하면 상위 위젯이 rebuild 되어도, 변경이 없으면 다시 build가 되지 않는다.
• ListView 보다는 ListView.builder가 낫다. ListView는 모든 위젯을 빌드하는 반면 ListView.builder는 화면에서 벗어나면 메모리에 유지하지 않는다.

성능 개선 방법은 내가 이해할 수 있는 선에서 정리해보았다. 실제로 큰 체감을 했던 방법은 const 였는데, 단순히 const widget을 사용가능한 곳에 모두 추가했더니 엄청난 퍼포먼스 향상을 했었다.. Flutter Lint 를 이용하면 코드 스타일을 통일할 수 있어서 (const 필수 등록 같은) 성능 개선에 충분히 영향을 미칠 수 있기에 Lint 사용을 추천한다. (사실 모든 언어에 사용을 하면 좋은..?)
더 자세하고 많은 성능 개선 방법은 공식문서 와 Flutter 앱 성능 측정 및 개선 방법 이 글을 확인하면 좋을 것 같다.