0Pricing
Flutter Mobile Development · Lesson

Profiling Jank with the DevTools Timeline

Capture frame charts and identify expensive build and raster phases in DevTools.

What 'Jank' Actually Means

Jank is any visible stutter caused by Flutter missing a frame deadline. On a 60Hz display the engine has roughly 16.7ms per frame; on 120Hz devices only 8.3ms.

  • If the UI thread or the raster thread runs over budget, the frame is dropped and the user sees a hitch.
  • Profiling jank means finding which frames are slow and which phase (build/layout/paint vs. rasterization) ate the time.

The DevTools Performance view (the Timeline) is the primary tool for this investigation.

Always Profile in Profile Mode

Never trust timings from a debug build. Debug mode disables JIT optimizations, asserts run, and the Dart VM is slower, so numbers are meaningless.

  • Run with flutter run --profile on a real device, not a simulator.
  • Profile mode keeps service extensions (so DevTools works) but uses AOT-compiled, release-grade code.
  • Simulators use your Mac's CPU/GPU and hide real raster cost.
// Launch the app in profile mode from the terminal:
//   flutter run --profile -d <deviceId>
//
// List attached physical devices first:
//   flutter devices
//
// Then open DevTools at the printed URL and select the
// Performance tab to capture the timeline.
void main() {
  // The flag matters: assert() bodies are stripped in profile/release.
  bool inDebug = false;
  assert(() {
    inDebug = true;
    return true;
  }());
  print(inDebug ? 'debug build' : 'profile/release build');
}

All lessons in this course

  1. The Three Trees: Widget, Element, and RenderObject
  2. Profiling Jank with the DevTools Timeline
  3. RepaintBoundary, Const Widgets, and Rebuild Pruning
  4. Shader Warm-Up and Impeller Migration
← Back to Flutter Mobile Development