[Web] Gridview with images has significant memory leak

[mat100payette]

Details

Using GridView.builder with many Image.network() children seems to create a memory leak.
The following minimal app (with a few added lines of solutions I tested from here and there) starts at around 175Mb of RAM consumption. After scrolling through all images, the RAM reaches a whopping 500Mb and never goes back down.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  late final List<String> imageLinks;
  final ScrollController controller = ScrollController();

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    widget.imageLinks = List.generate(1000, (index) => 'https://picsum.photos/id/$index/200/300');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 200,
              child: GridView.builder(
                controller: widget.controller,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 16 / 9,
                ),
                addAutomaticKeepAlives: false, // Tried this
                addRepaintBoundaries: false, // Tried this
                shrinkWrap: true, // Tried this
                cacheExtent: 0, // Tried this
                itemCount: widget.imageLinks.length,
                itemBuilder: (context, index) => Image.network(widget.imageLinks[index]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Target Platform: Web
Target OS version/browser: Chrome 96.0.4664.45 (64 bits)
Devices: -

As a side note, I did also try to use Disable Cache in Chrome DevTools, but that did not help.

Logs

Logs

No issues found! (ran in 2.7s)

[√] Flutter (Channel master, 2.6.0-12.0.pre.878, on Microsoft Windows [version 10.0.18363.1916], locale fr-CA)
    • Flutter version 2.6.0-12.0.pre.878 at C:\Flutter\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17980da91a (2 hours ago), 2021-12-01 12:44:07 -0800
    • Engine revision c2fcadef89
    • Dart version 2.16.0 (build 2.16.0-56.0.dev)
    • DevTools version 2.8.0

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] VS Code (version 1.62.3)
    • VS Code at C:\Users\matpa\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.28.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.45
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 96.0.1054.29

! Doctor found issues in 2 categories.

[mat100payette]

I noticed that when I scroll somewhat fast (nothing unreasonable), the imageCache seems to show weird behavior.

First I set the maximum object count of the cache manually: (ommited the code to apply that custom cache to the app)

class MyImageCache extends ImageCache {
  MyImageCache() {
    maximumSize = 6;
  }
}

Then, in the builder function of the GridView, I added these prints:

itemBuilder: (context, index) {
  print('Cache size: ${imageCache?.currentSize}');
  print('Cache bytes: ${imageCache?.currentSizeBytes}');
  print('Pending: ${imageCache?.pendingImageCount}');
  print('Live: ${imageCache?.liveImageCount}');
  print('');
  return Image.network(widget.imageLinks[index]);
},

See the attached console logs.

You can see that the Pending and Live counts keep going up, despite the Cache size and Cache bytes capping as per the restriction I set to it.

Is this normal behavior ? Has it anything to do with the potential leak I'm describing ?

[maheshj01]

HI @mat100payette, thanks for filing the issue,

The following minimal app (with a few added lines of solutions I tested from here and there) starts at around 175Mb of RAM consumption. After scrolling through all images, the RAM reaches a whopping 500Mb and never goes back down.

can you please share How you are measuring the memory usage?

[mat100payette]

HI @mat100payette, thanks for filing the issue,

The following minimal app (with a few added lines of solutions I tested from here and there) starts at around 175Mb of RAM consumption. After scrolling through all images, the RAM reaches a whopping 500Mb and never goes back down.

can you please share How you are measuring the memory usage?

From your question I'm assuming you tried my minimal example and did not see any memory leak/increase with whatever measurement method you use, is that correct ?

I monitored the memory usage from task manager, looking at the single chrome instance I had open running the example code in release mode.

[mat100payette]

I ran some more tests and got the following info:

1. The Pending and Live counts from the image cache going up is not the issue. I made a stateful widget to contain each network image and forcefully evicted the image on dispose. The counts then remained at around 5-7 (instead of growing infinitely), but the RAM usage from the chrome window kept going up regardless.
2. No matter if I take a heap snapshot at the start (before scrolling a lot) or at the end (after scrolling), the snapshots show a pretty constant 150Mb size:

Here's the snapshot at the start, Task Manager reported 390Mb RAM usage from the Chrome window:

And here's the after, where Task Manager was reporting 800Mb RAM usage:

These snapshots were using my code with the forceful image evicts + Chrome's Disable Cache devtools option.

[maheshj01]

Thanks for the info I could see the chrome memory usage in task manager keeps increasing despite the snapshot size being constant. I am not really sure if this is intended, Leaving this issue open for further investigation from the team.

sample code can be found in the original post

flutter doctor -v

[√] Flutter (Channel master, 2.6.0-12.0.pre.885, on Microsoft Windows [Version 10.0.19042.1348], locale
    en-US)
    • Flutter version 2.6.0-12.0.pre.885 at C:\flutter_sdk\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 16ec56ee0f (28 hours ago), 2021-12-02 02:49:05 -0500
    • Engine revision 888f4c0fc6
    • Dart version 2.16.0 (build 2.16.0-56.0.dev)
    • DevTools version 2.8.0

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.10+0-b96-7249189)

[√] VS Code (version 1.61.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.29.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.1348]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 96.0.4664.45
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 95.0.1020.44

• No issues found!