[web] Reuse ImageElement(s) across frames (#18437)

* reuse images across frames
* Change implementation to CrossFrameCache at picture level
* Update licenses_flutter

Author: ferhatb

ci/licenses_golden/licenses_flutter

@@ -438,6 +438,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/conic.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/dom_canvas.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/dom_renderer.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/engine_canvas.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/frame_reference.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/history.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/houdini_canvas.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html_image_codec.dart

lib/web_ui/lib/src/engine.dart

@@ -56,6 +56,7 @@ part 'engine/conic.dart';
 part 'engine/dom_canvas.dart';
 part 'engine/dom_renderer.dart';
 part 'engine/engine_canvas.dart';
+part 'engine/frame_reference.dart';
 part 'engine/history.dart';
 part 'engine/houdini_canvas.dart';
 part 'engine/html_image_codec.dart';

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -26,6 +26,7 @@ class BitmapCanvas extends EngineCanvas {
   }
 
   ui.Rect _bounds;
+  CrossFrameCache<html.HtmlElement> _elementCache;
 
   /// The amount of padding to add around the edges of this canvas to
   /// ensure that anti-aliased arcs are not clipped.
@@ -116,6 +117,11 @@ class BitmapCanvas extends EngineCanvas {
     _setupInitialTransform();
   }
 
+  /// Setup cache for reusing DOM elements across frames.
+  set elementCache(CrossFrameCache<html.HtmlElement> cache) {
+    _elementCache = cache;
+  }
+
   void _updateRootElementTransform() {
     // Flutter emits paint operations positioned relative to the parent layer's
     // coordinate system. However, canvas' coordinate system's origin is always
@@ -354,6 +360,26 @@ class BitmapCanvas extends EngineCanvas {
     _cachedLastStyle = null;
   }
 
+  html.ImageElement _reuseOrCreateImage(HtmlImage htmlImage) {
+    final String cacheKey = htmlImage.imgElement.src;
+    if (_elementCache != null) {
+      html.ImageElement imageElement = _elementCache.reuse(cacheKey);
+      if (imageElement != null) {
+        return imageElement;
+      }
+    }
+    // Can't reuse, create new instance.
+    html.ImageElement newImageElement = htmlImage.cloneImageElement();
+    if (_elementCache != null) {
+      _elementCache.cache(cacheKey, newImageElement, _onEvictElement);
+    }
+    return newImageElement;
+  }
+
+  static void _onEvictElement(html.HtmlElement element) {
+    element.remove();
+  }
+
   html.HtmlElement _drawImage(
       ui.Image image, ui.Offset p, SurfacePaintData paint) {
     final HtmlImage htmlImage = image;
@@ -363,7 +389,7 @@ class BitmapCanvas extends EngineCanvas {
     html.HtmlElement imgElement;
     if (colorFilterBlendMode == null) {
       // No Blending, create an image by cloning original loaded image.
-      imgElement = htmlImage.cloneImageElement();
+      imgElement = _reuseOrCreateImage(htmlImage);
     } else {
       switch (colorFilterBlendMode) {
         case ui.BlendMode.colorBurn:
@@ -596,7 +622,7 @@ class BitmapCanvas extends EngineCanvas {
     html.Element.html(svgFilter, treeSanitizer: _NullTreeSanitizer());
     rootElement.append(filterElement);
     _children.add(filterElement);
-    final html.HtmlElement imgElement = image.cloneImageElement();
+    final html.HtmlElement imgElement = _reuseOrCreateImage(image);
     imgElement.style.filter = 'url(#_fcf${_filterIdCounter})';
     if (colorFilterBlendMode == ui.BlendMode.saturation) {
       imgElement.style.backgroundColor = colorToCssString(filterColor);
@@ -787,6 +813,7 @@ class BitmapCanvas extends EngineCanvas {
   void endOfPaint() {
     assert(_saveCount == 0);
     _canvasPool.endOfPaint();
+    _elementCache?.commitFrame();
   }
 }
 

lib/web_ui/lib/src/engine/frame_reference.dart

@@ -0,0 +1,102 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @dart = 2.6
+part of engine;
+
+/// A monotonically increasing frame number being rendered.
+///
+/// Used for debugging only.
+int _debugFrameNumber = 1;
+
+List<FrameReference<dynamic>> _frameReferences = <FrameReference<dynamic>>[];
+
+/// A temporary reference to a value of type [V].
+///
+/// The value automatically gets set to null after the current frame is
+/// rendered.
+///
+/// It is useful to think of this as a weak reference that's scoped to a
+/// single frame.
+class FrameReference<V> {
+  /// Creates a frame reference to a value.
+  FrameReference([this.value]) {
+    _frameReferences.add(this);
+  }
+
+  /// The current value of this reference.
+  V value;
+}
+
+/// Cache where items cached before frame(N) is committed, can be reused in
+/// frame(N+1) and are evicted if not.
+///
+/// A typical use case is image elements. As images are created and added to
+/// DOM when painting a scene they are cached and if possible reused on next
+/// update. If the next update does not reuse the element, it is evicted.
+///
+/// Maps are lazily allocated since many pictures don't contain cachable images
+/// at all.
+class CrossFrameCache<T> {
+  // Cached items in a scene.
+  Map<String, List<_CrossFrameCacheItem<T>>> _cache;
+
+  // Cached items that have been committed, ready for reuse on next frame.
+  Map<String, List<_CrossFrameCacheItem<T>>> _reusablePool;
+
+  // Called when a scene or picture update is committed.
+  void commitFrame() {
+    // Evict unused items from prior frame.
+    if (_reusablePool != null) {
+      for (List<_CrossFrameCacheItem<T>> items in _reusablePool.values) {
+        for (_CrossFrameCacheItem<T> item in items) {
+          item.evict();
+        }
+      }
+    }
+    // Move cached items to reusable pool.
+    _reusablePool = _cache;
+    _cache = null;
+  }
+
+  /// Caches an item for reuse on next update frame.
+  ///
+  /// Duplicate keys are allowed. For example the same image url may be used
+  /// to create multiple instances of [ImageElement] to be reused in the future.
+  void cache(String key, T value, [CrossFrameCacheEvictCallback<T> callback]) {
+    _addToCache(key, _CrossFrameCacheItem<T>(value, callback));
+  }
+
+  void _addToCache(String key, _CrossFrameCacheItem<T> item) {
+    _cache ??= {};
+    (_cache[key] ??= [])..add(item);
+  }
+
+  /// Given a key, consumes an item that has been cached in a prior frame.
+  T reuse(String key) {
+    if (_reusablePool == null) {
+      return null;
+    }
+    List<_CrossFrameCacheItem<T>> items = _reusablePool[key];
+    if (items == null || items.isEmpty) {
+      return null;
+    }
+    _CrossFrameCacheItem<T> item = items.removeAt(0);
+    _addToCache(key, item);
+    return item.value;
+  }
+}
+
+class _CrossFrameCacheItem<T> {
+  final T value;
+  final CrossFrameCacheEvictCallback<T> evictCallback;
+  _CrossFrameCacheItem(this.value, this.evictCallback);
+  void evict() {
+    if (evictCallback != null) {
+      evictCallback(value);
+    }
+  }
+}
+
+typedef CrossFrameCacheEvictCallback<T> = void Function(T value);

lib/web_ui/lib/src/engine/surface/picture.dart

@@ -218,16 +218,13 @@ class PersistedStandardPicture extends PersistedPicture {
     return bitmapCanvas.bitmapPixelCount;
   }
 
-  FrameReference<bool> _didApplyPaint = FrameReference<bool>(false);
-
   @override
   void applyPaint(EngineCanvas oldCanvas) {
     if (picture.recordingCanvas.hasArbitraryPaint) {
       _applyBitmapPaint(oldCanvas);
     } else {
       _applyDomPaint(oldCanvas);
     }
-    _didApplyPaint.value = true;
   }
 
   void _applyDomPaint(EngineCanvas oldCanvas) {
@@ -335,13 +332,15 @@ class PersistedStandardPicture extends PersistedPicture {
         DebugCanvasReuseOverlay.instance.reusedCount++;
       }
       bestRecycledCanvas.bounds = bounds;
+      bestRecycledCanvas.elementCache = _elementCache;
       return bestRecycledCanvas;
     }
 
     if (_debugShowCanvasReuseStats) {
       DebugCanvasReuseOverlay.instance.createdCount++;
     }
     final BitmapCanvas canvas = BitmapCanvas(bounds);
+    canvas.elementCache = _elementCache;
     if (_debugExplainSurfaceStats) {
       _surfaceStatsFor(this)
         ..allocateBitmapCanvasCount += 1
@@ -371,6 +370,10 @@ abstract class PersistedPicture extends PersistedLeafSurface {
   final ui.Rect localPaintBounds;
   final int hints;
 
+  /// Cache for reusing elements such as images across picture updates.
+  CrossFrameCache<html.HtmlElement> _elementCache =
+      CrossFrameCache<html.HtmlElement>();
+
   @override
   html.Element createElement() {
     return defaultCreateElement('flt-picture');
@@ -591,6 +594,8 @@ abstract class PersistedPicture extends PersistedLeafSurface {
   @override
   void update(PersistedPicture oldSurface) {
     super.update(oldSurface);
+    // Transfer element cache over.
+    _elementCache = oldSurface._elementCache;
 
     if (dx != oldSurface.dx || dy != oldSurface.dy) {
       _applyTranslate();

lib/web_ui/lib/src/engine/surface/surface.dart

@@ -30,30 +30,6 @@ bool debugShowClipLayers = false;
 /// reasonable.
 const double _kScreenPixelRatioWarningThreshold = 6.0;
 
-/// A monotonically increasing frame number being rendered.
-///
-/// Used for debugging only.
-int _debugFrameNumber = 1;
-
-List<FrameReference<dynamic>> _frameReferences = <FrameReference<dynamic>>[];
-
-/// A temporary reference to a value of type [V].
-///
-/// The value automatically gets set to null after the current frame is
-/// rendered.
-///
-/// It is useful to think of this as a weak reference that's scoped to a
-/// single frame.
-class FrameReference<V> {
-  /// Creates a frame reference to a value.
-  FrameReference([this.value]) {
-    _frameReferences.add(this);
-  }
-
-  /// The current value of this reference.
-  V value;
-}
-
 /// Performs any outstanding painting work enqueued by [PersistedPicture]s.
 void commitScene(PersistedScene scene) {
   if (_paintQueue.isNotEmpty) {

lib/web_ui/test/engine/frame_reference_test.dart

@@ -0,0 +1,76 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @dart = 2.6
+import 'package:ui/src/engine.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('CrossFrameCache', () {
+    test('Reuse returns no object when cache empty', () {
+      final CrossFrameCache<TestItem> cache = CrossFrameCache();
+      cache.commitFrame();
+      TestItem requestedItem = cache.reuse('item1');
+      expect(requestedItem, null);
+    });
+
+    test('Reuses object across frames', () {
+      final CrossFrameCache<TestItem> cache = CrossFrameCache();
+      final TestItem testItem1 = TestItem('item1');
+      cache.cache(testItem1.label, testItem1);
+      cache.commitFrame();
+      TestItem requestedItem = cache.reuse('item1');
+      expect(requestedItem, testItem1);
+      requestedItem = cache.reuse('item1');
+      expect(requestedItem, null);
+    });
+
+    test('Reuses objects that have same key across frames', () {
+      final CrossFrameCache<TestItem> cache = CrossFrameCache();
+      final TestItem testItem1 = TestItem('sameLabel');
+      final TestItem testItem2 = TestItem('sameLabel');
+      final TestItem testItemX = TestItem('X');
+      cache.cache(testItem1.label, testItem1);
+      cache.cache(testItemX.label, testItemX);
+      cache.cache(testItem2.label, testItem2);
+      cache.commitFrame();
+      TestItem requestedItem = cache.reuse('sameLabel');
+      expect(requestedItem, testItem1);
+      requestedItem = cache.reuse('sameLabel');
+      expect(requestedItem, testItem2);
+      requestedItem = cache.reuse('sameLabel');
+      expect(requestedItem, null);
+    });
+
+    test('Values don\'t survive beyond next frame', () {
+      final CrossFrameCache<TestItem> cache = CrossFrameCache();
+      final TestItem testItem1 = TestItem('item1');
+      cache.cache(testItem1.label, testItem1);
+      cache.commitFrame();
+      cache.commitFrame();
+      TestItem requestedItem = cache.reuse('item1');
+      expect(requestedItem, null);
+    });
+
+    test('Values are evicted when not reused', () {
+      final Set<TestItem> _evictedItems = {};
+      final CrossFrameCache<TestItem> cache = CrossFrameCache();
+      final TestItem testItem1 = TestItem('item1');
+      final TestItem testItem2 = TestItem('item2');
+      cache.cache(testItem1.label, testItem1, (TestItem item) {_evictedItems.add(item);});
+      cache.cache(testItem2.label, testItem2, (TestItem item) {_evictedItems.add(item);});
+      cache.commitFrame();
+      expect(_evictedItems.length, 0);
+      cache.reuse('item2');
+      cache.commitFrame();
+      expect(_evictedItems.contains(testItem1), true);
+      expect(_evictedItems.contains(testItem2), false);
+    });
+  });
+}
+
+class TestItem {
+  final String label;
+  TestItem(this.label);
+}