Flutter[플러터(고급)] Flutter 최적화하기(성능 개선), 렌더링 속도 Jank의 대하여

빨간 막대 부분이 Jank가 발생하는 프레임

Jank

Jank는 프레임 드롭이나 렌더링 지연으로 화면의 끊김 현상을 의미합니다. 사용자 입장에선 안 좋은 경험입니다.

플러터 Skia 엔진을 쓰는데 Skia 엔진은 초당 60FPS로 동작하는 Ticker와 함께 화면을 업데이트 친다. 이걸 계산하면 플러터는 초당 16ms안에 렌더링을 끝내야 화면이 버벅대지 않습니다. 16ms 이내에 각 프레임을 렌더링하지 못 하면 프레임이 스킵 되고, 사용자는 화면이 끊기거나 버벅거리는 현상을 경헙하게 됩니다. 이것이 바로 Jank입니다.

즉 사용자의 경험을 저하시키는 Jank를 발생시키지 않으려면 16ms라는 기준에 맞추어여 합니다.

Jank는 왜 발생하는가?

• 복잡한 위젯 트리: 복잡한 위젯 구조로 인해 위젯 트리를 탐색하고 렌더링하는 데 오랜 시간이 걸리는 경우.
• 비동기 작업의 동기화 문제: 네트워크 요청이나 데이터베이스 읽기와 같은 작업이 UI 스레드에서 동작하게 되면 프레임 렌더링이 지연될 수 있음
• 애니메이션 처리: 복잡하거나 무거운 애니메이션이 많으면 프레임 드롭이 발생할 수 있습니다.
• 쉐이더 컴파일: Shader Compilation으로 인해 렌더링 엔진이 복잡한 그래픽을 그리기 위해 시간이 많이 소모되는 경우.

-> 쉐이더 컴파일의 경우 쉐이더 프리컴파일을 통해 앱 로딩 시 필요한 쉐이더를 미리 컴파일(캐싱)해서 해결 할 수 있음 

• I/O 작업: 파일 읽기, 쓰기 등의 작업이 UI 스레드에서 실행될 때, 해당 작업이 오래 걸리면 렌더링 지연이 발생할 수 있습니다.

 

Jank를 측정하는 법 

"DevTools의 Performance 탭에 들어간 후 (Profile 모드로 측정), 프로젝트에서 이 화면 저 화면을 움직일 때마다 막대 그래프가 생성되는 것을 확인할 수 있다. 만약 생성된 막대 그래프가 빨간색이라면 17ms 이상 걸렸다는 뜻이다. 즉, Jank가 발생한 시점이라는 의미이다."

 

Jank 해결 및 성능 최적화는 아래 블로그에서 자세히 작성하였습니다.