Read gifs in Image.network on flutter web will have a lot memory impact in mac Safari

[skypu3]

Add fewer gifs use Image network on Safari 14.0.1, the page memory used a lot, go to 3.3gb memory at short time (more and more)
Tested on Chrome and Firefox, which are good.
memory snapshots with 20secs, flutter process name: dashboard.mochar.co:

My flutter doctor -v

[✓] Flutter (Channel master, 2.3.0-17.0.pre.345, on macOS 11.0.1 20B29
    darwin-x64, locale zh-Hant-TW)
    • Flutter version 2.3.0-17.0.pre.345 at
      /Users/felixchang/development/flutter1.17
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1542ace4f (12 hours ago), 2021-06-13 20:59:02 -0400
    • Engine revision ab2c00c771
    • Dart version 2.14.0 (build 2.14.0-208.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.2
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.57.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.101

[darshankawar]

@skypu3
Are you seeing the memory impact in debug or in release mode ?

[skypu3]

@darshankawar
I see the memory impact in release mode.

[darshankawar]

@skypu3
Thanks for the details. I tried this code snippet and opened the web app on iphone's safari browser, but didn't notice the behavior.

Can you provide steps to replicate the issue and also how to see the memory impact as you showed in screenshots ?
Thanks.

[skypu3]

Hi, I posted screenshot video here, the environment is:

1. macOS with Safari 11.0.1
2. https://flutter.dev/docs/cookbook/images/network-image#bonus-animated-gifs run this example
3. use gif like: https://cdn-files.mochar.co/media/xFAMgjenegSP98fANfoEdz4ydps1/8seFGnWZex.gif

The memory in debug mode (example) up from 600mb into 1.5gb in 1 min, however it should be a lot impact on release mode.
https://user-images.githubusercontent.com/70039/122317229-c4706b80-cf4f-11eb-91df-a9ff95783387.mp4

[darshankawar]

Thanks for the details. I was able to replicate it and seems to be happening with canvaskit rendering, because, with html rendering, the gif seems to be playing properly, but with canvaskit, the gif doesn't play and shows below message:

With html rendering:

84565_html.mov

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.2, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.2 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision d79295af24 (6 days ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)        

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 10 (API 29)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.106

• No issues found!