Use case

Although RepaintBoundary is a key widget in improving Flutter’s performance on the UI thread, it’s not well-utilized on the GPU thread. For example, only the lowest-level RepaintBoundary, which corresponds to leaf-level engine PictureLayer, currently triggers the raster cache on the GPU thread. In certain scenarios, raster caching can make a big performance difference -- e.g., 20%-30% in our home_scroll_perf average_frame_rasterizer_time_millis benchmark.

With the recent introduction of retained EngineLayers, we now have the opportunity to use RepaintBoundary to trigger more raster caching on the higher level RepaintBoundary. Similar to the recent opacity and PhysicalShapeLayer optimizations, we may be able to improve our performance by multiple times.

Proposal

Add a RasterCache option to the RepaintBoundary widget, so the developer can decide when to engage the optimizations. This option is not only to override our current raster cache heuristics, which are not very smart or reliable, but also allows developers to elect to make the tradeoff between quality and speed themselves. For example, when there’s a rotation transformation above the RepaintBoundary, raster caching the whole RepaintBoundary means that we’re no longer drawing pixel-perfect graphics, but the performance gain may significantly outweigh the quality drop (see #24627).

Things to implement:

• Write performance tests for the scenarios where we’d like to see improvements. This will guide our implementation and check our correctness and performance.
• Add a RasterCache option to the RepaintBoundary widget and wire it up between the framework and the engine.
• Enable the engine-side raster caching based on the option.
• Document the feature, and update Github issues to reflect the performance improvement, to teach our developers how to do it themselves.

Proposed by @liyuqian