Flutter용 성능 오버레이 패키지는 프레임 레이트, 메모리 사용량, CPU 부하와 같은 실시간 성능 지표를 앱 인터페이스에 직접 제공합니다. 웹을 포함한 모든 플랫폼에서 원활하게 작동하도록 설계되어 개발 중 성능 병목 현상을 식별하고 해결하는 데 도움을 줍니다. 가볍고 구성 가능한 오버레이는 UI 반응성과 리소스 소비를 디버깅하는 데 이상적입니다. 간단한 pub add 명령어로 쉽게 통합 가능하며 여러 타겟 플랫폼을 지원합니다.
사용 사례
개발 중 실시간 성능 모니터링
프레임 드롭 및 렌더링 문제 식별
웹에서 앱 반응성 최적화
메모리 및 CPU 사용량 디버깅
다양한 기기에서 앱 성능 테스트
생산 환경과 유사한 환경에서 UI 부드러움 검증
주요 기능
실시간 프레임률 및 성능 통계
웹을 포함한 크로스플랫폼 지원
pub add를 사용한 최소 설정
사용자 정의 가능한 오버레이 외관
릴리스 모드에서 런타임 오버헤드 없음
모든 주요 Flutter 플랫폼을 지원합니다
적합한 대상
Flutter 개발자가 UI 지연 문제를 진단하는 중
웹 중심의 Flutter 앱을 개발하는 팀
성능 중심의 앱 최적화
프론트엔드 엔지니어가 반응성 테스트 중
모바일 및 데스크톱 앱 개발자
품질 보증 테스터가 앱의 안정성을 검증하고 있습니다
고려 사항
생산 빌드에서는 오버레이를 비활성화해야 합니다
강한 사용 시 성능에 약간의 영향을 미칠 수 있습니다
최종 사용자에게 노출되도록 의도되지 않음
앱 엔트리 포인트에서 수동 통합이 필요합니다
레이아웃에 대한 사용자 정의 옵션이 제한적입니다
활성 개발 세션 중에 가장 잘 사용됩니다
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
performance
Performance overlay for Flutter apps that works on web.
Reading the charts
You can read the charts in the performance overlay like this:
Every bar represents a single frame.
The height of each bar represents the total time it took to render the frame.
The line indicates the target frame time (e.g. 16ms for 60 FPS) and frames
that cross that line turn red.
The overlay is divided into three charts.
UI: the time it takes the UI to build.
Raster: the time it takes to rasterize the frame.
High latency: the total time between vsync start and raster finish, i.e. the
time it takes from an input to seeing the next frame.
The "max" value shows how long the worst sample in the displayed range took.
The "avg" value represents the average of all samples in the displayed range.
The displayed FPS value indicates the best logically possible number of
frames that could have been rendered per second. This might not be the actual
value, but the actual value is definitely not greater than this. This is
computed based on the average.
Limitations
The package is based on the FrameTiming API. Everything
documented there applies. This should correspond one to one with the values you
see in the framework performance overlay on mobile and on native desktop. So if
you like how this looks better, you can also use this package on mobile and
native desktop :)
On web, however, it shows somewhat limited data. This is because performance
data from the GPU on web is not available in the FrameTiming instances (which
would be part of the raster duration on native). What is included in the raster
duration on web are only parts of what is done on the GPU thread on native (due
to limitations on the web which require running the computations on the UI
thread).
If you want to access the GPU performance data, you can use Chrome DevTools or
chrome://tracing for example.
Repo structure
This repo currently contains the following packages:
