Monitor Performance of your Flutter App with DevTools: Raster Thread

In this series, we explored Flutter DevTool's Performance tab and learned how to detect and fix UI thread janks. In this final part, we will discuss the role of the raster thread and some methods to fix raster janks. You can find the complete series here: Monitor Performance of your Flutter App with DevTools.

What is Raster Thread?

Flutter code mainly runs on two threads: the UI thread and the raster thread. All Dart code runs on the UI thread. The UI thread creates a layer tree, which is a lightweight object containing device-independent painting commands, and sends this layer tree to the raster thread to be rendered on the device.

The raster thread, previously known as the GPU thread, was renamed because it doesn't run on the GPU. It takes the layer tree and translates it into a format the GPU can understand before sending it to the GPU.

Why Should You Care About Raster Jank?

Let's say your UI thread is working perfectly, completing tasks in under 8 ms and running smoothly at 120 fps. However, if your raster thread is slow and takes more than 16 ms to render, the frame rate drops below 60 fps. This can cause noticeable issues like stutters, dropped frames, or lag, especially during animations, scrolling, or when rendering large images.

You might have noticed that some images take a moment to load or appear delayed on the screen. This often happens because large images are not used efficiently, which we will address shortly.

From a user's perspective, an app with noticeable jank is simply a laggy app. Users don't care whether the issue is with the UI thread or the raster thread; they just want a smooth experience.

To understand what's happening on the raster thread, your first thought might be to check the timeline events in DevTools. However, this is where things can get complicated.

Limitations of Using Timeline Events to Detect Raster Jank

Let’s again take the example of the timeline events from the counter app.

The events visible in the Raster thread are all C++ methods from the Flutter Engine. You'll mostly see Rasterizer::DoDraw and similar functions. There are no details about what happens in these methods, and these names are not familiar to most Flutter developers.

Since timeline events don't provide clear guidance, diagnosing raster jank becomes a hands-on, investigative process. It requires experimentation, observation, and patience.

The Need for Detective Work

Since DevTools won't easily show the root cause of raster jank, you'll need to investigate manually. A helpful approach is to comment out sections of your widget tree that you suspect might be causing the issue. Then, compare the frame performance before and after to identify the problem area.

For a detailed real-world example, this excellent blog post by a former Flutter team member provides a thorough guide on how to identify raster jank.

To do this effectively, we should at least be aware of some widgets and patterns that commonly cause raster jank.

Common Causes to Investigate

While the causes of raster jank can vary greatly depending on the context, and what causes jank in one situation might work perfectly fine in another, there are still some common patterns and widgets worth checking when you're trying to diagnose raster performance issues.

• BoxShadows: Using too many shadows can greatly increase the workload on the raster thread, especially if they cover large areas or have high blur levels.

• Shaders: Using too many or complex shaders, like gradients or custom fragment shaders, can put a strain on the raster thread, causing jank during rendering.

• Overlaps or Overdraw: Drawing multiple widgets on top of each other makes the same pixels get painted multiple times, which increases rendering costs.

• Oversized Images: Using large-resolution images in small display areas (like a 2000×2000 px image for a 20×20 widget) can slow down rasterization. The ideal image size should match the display size multiplied by the device pixel ratio.
  If you're interested, this talk dives deeper into how image resolution impacts performance.

Conclusion

Fixing raster jank isn't easy; it often requires patience, experimentation, and careful observation. Unlike UI thread jank, where DevTools can directly highlight slow widgets, raster thread issues rarely provide clear clues. You'll need to do some detective work: narrow down suspects, test performance before and after changes, and think critically about what's being rendered and why.

Avoid premature optimizations or blindly refactoring code. Instead, base your fixes on measurable performance differences. Remember, sometimes even a small change, like resizing an image or removing an unnecessary shadow, can make a noticeable difference.

Stay curious, be methodical, and don't be afraid to iterate. Performance tuning is part science, part art.