Optimizing your Flutter App 정리

최근 코등을하면서 어떻게하면 좀더 디버깅을 빨리, 그리고 잘 할수 있을까? 혹은 그것을 도와주는 좋은 툴들이 있을까하고 고민을 하고 있다. 아래 영상은 그걸 찾다가 발견한 것은 아니지만 보다보니 유익한 것같아서 기억하고 싶은 내용들을 조금 정리해 둘까한다. 

 

https://www.youtube.com/watch?v=vVg9It7cOfY 

"Jank" is like a visual stutter.  Jank란 화면이 버벅거리는 것을 의미한다. 그러니까 뭔가 부드럽게(우연하게) 넘어가야하는데 그렇지 못한 경우, 버벅거리거나 프레임을 한 두개 skip 하는 것처럼 시각적으로 nice 않는 것을 말한다. 

  

Flutter는 적어도 3개의 쓰레드르 사용한다. 

첫번째는 UI 쓰레드이다. 메인 쓰레드로써 widget을 build한다. 

두번째와 세번째는 각각 GPU 쓰레드, IO 쓰레드이다. 하지만 이 둘은 건드릴일이 없다. 

그리고 프로그래머가 자신이 필요한 computation을 위해 자신만의 쓰레드를 만들수도 있다. 

 

중요한 것은 UI 쓰레드에서 많은 시간을 잡아먹게되면 너의 App은 Jank 하게 된다. 왜냐하면 이 쓰레드에서 flutter framework가 돌아가기 때문이다. 

 

Tracing은 너의 앱의 각각의 computation이 언제, 그리고 얼마만큼의 시간을 잡아먹는지를 recording(기록)하는 것이다.  

 

코드 레벨에서 보면 아래처럼 확인하고자하는 computation에 아래처럼 시간을 측정할 수 있다. 

 하지만 굳위 위의 코드처럼 쓸일은 별로 없다. flutter에서 중요한 코드 부분에서 이러한일을 대신해주기 때문이다. 

Flame chart는 위와 같은 모양이며 widget이 필드되면서 얼마만큼의 시간을 잡아먹는지 그리고 그 빌드 안에서 세부 항목들이 얼마나 시간을 잡아먹는지를 bar 그래프로 확인할 수 있다. 아래는 실제 앱의 flame chart 예이다. (flame chart라고 부르는게 아래서 위로 보며 flame같아보여서라고한다...농담인가 진담인가....??)

 

app을 Profiling할 때는 debug 모드에서 사용하지마라. debug모드는 production 모드에서 보다 훨씬 느리다. 

그리고 시뮬레이터나 에뮬레이터에서 하지마라. 에뮬레이터에서의 동작은 실제 장치에서 보여지는 것이랑 같지 않을 수 있기 때문이다.  따라서 Profiling 할때는 Do it in profile mode. 그리고 Do it on a real device. 

 

Avoid work in the UI thread. 물론 모든 작업을 UI에서 피할 수는 없다. 그럼 앱 자체가 없을테니...하지만 다른 쓰레드에서 할 수 있다면.  R ebuild하지 않아도 되는 위젯들을 rebuild하게 하지마라.

Minimize use of expensive widgets. 예를들어 backdropfilter 같은거....

 

타임라인 분석 등등을 해보고 문제가 발견되면 그때 최적화를 해라.

 

미리 자신의 코드를 보면서 최적화를 하려고 하지마라. 그러면 모든 코드를 손보려고 하게 될 것이고 많은 시간을 소모하게 된다. 

 

성능의 문제가 발견되면 그때 성능 분석을 통해 문제를 찾고 고쳐라. 그리고 고치고나서는 얼마나 성능이 향상되었는지 체크해 봐라. 

 

프로파일 모드에서 동작하려면 터미널 창에서 아래처럼 해라. 

flutter run --profile

그리고 --trace-skia 를 추가하면 CPU thread에서 일어나는 일들애 대한 정보를 얻을 수 있다. 

 

성능 최적화를 할때는 프로파일 모드로 작업을 하게 되므로 hot reload가 없어서 불편한것이 단점이긴하다.

 

profile모드로 시작하면 터미널 창의 설명을 보면 Oservatory debugger 를 확인 할 수 있는 링크를 줄것이다. 

그리고 터미널창에서 p를 누르면 디바이스의 상단에 performance overlay로 보여준다.

a를 누르면 뭔가 더 자세한 내용을 볼 수 있다고하는데.....나중에 해보자...

 

복잡한 계산때문에 timeline이나 cpu performance에 영향이 있다면 compute( ) 함수를 이용해서 다른 thread를 만들어서 계산 후 받을 수 있도록하면 block을 줄 일 수 있다. 

영상 하단에 있던 추천 링크 (다음에 보자)

https://docs.flutter.dev/perf

Performance

 

https://medium.com/flutter/performance-testing-of-flutter-apps-df7669bb7df7

Performance Testing of Flutter apps