<p dir="auto">Create a new ContainerLayer type or an argument to a SceneBuilder.build() or SceneBuilder.pushScene() that allows the framework to explicitly raster cache the subtree right away so subsequent redraws of the scene are optimized.</p>
<h2 dir="auto">Use case</h2>
<p dir="auto">Although <a href="https://docs.flutter.io/flutter/widgets/RepaintBoundary-class.html" rel="nofollow">RepaintBoundary</a> 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 <code class="notranslate">RepaintBoundary</code>, 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 <em>home_scroll_perf average_frame_rasterizer_time_millis</em> benchmark.</p>
<p dir="auto">With the recent introduction of retained <a href="https://docs.flutter.io/flutter/dart-ui/EngineLayer-class.html" rel="nofollow">EngineLayer</a>s, we now have the opportunity to use <code class="notranslate">RepaintBoundary</code> to trigger more raster caching on the higher level <code class="notranslate">RepaintBoundary</code>. Similar to the recent opacity and PhysicalShapeLayer optimizations, we may be able to improve our performance by multiple times.</p>
<h2 dir="auto">Proposal</h2>
<p dir="auto">Add a <code class="notranslate">RasterCache</code> option to the <code class="notranslate">RepaintBoundary</code> 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 <code class="notranslate">RepaintBoundary</code> means that we’re no longer drawing pixel-perfect graphics, but the performance gain may significantly outweigh the quality drop (see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="383264765" data-permission-text="Title is private" data-url="https://github.com/flutter/flutter/issues/24627" data-hovercard-type="issue" data-hovercard-url="/flutter/flutter/issues/24627/hovercard" href="https://github.com/flutter/flutter/issues/24627">#24627</a>).</p>
<p dir="auto">Things to implement:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Write performance tests for the scenarios where we’d like to see improvements. This will guide our implementation and check our correctness and performance.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Add a <code class="notranslate">RasterCache</code> option to the <code class="notranslate">RepaintBoundary</code> widget and wire it up between the framework and the engine.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Enable the engine-side raster caching based on the option.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Document the feature, and update Github issues to reflect the performance improvement, to teach our developers how to do it themselves.</li>
</ul>
<p dir="auto">Proposed by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/liyuqian/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/liyuqian">@liyuqian</a></p>