Flutter缓存图片加载速度不稳定问题排查求助

问题原因分析 #

1. Firebase Storage下载URL的临时特性：每次调用getDownloadURL()会生成带签名的临时URL（默认有效期较短），两次获取的URL不一致，导致CachedNetworkImage的缓存键不匹配，无法复用之前的缓存内容。
2. 内存缓存被回收：precacheImage是将图片缓存到Flutter的内存ImageCache中，返回主页后，系统可能因内存压力回收这部分缓存，第二次进入页面时需要重新从磁盘或网络加载。
3. 预缓存与CachedNetworkImage缓存机制不兼容：手动通过precacheImage处理的缓存，和CachedNetworkImage自身的磁盘缓存逻辑未打通，导致第二次进入时无法直接命中磁盘缓存。

解决方案 #

方案1：持久化缓存Firebase下载URL

将获取到的图片URL存储到本地（比如SharedPreferences），避免每次重新生成临时URL，确保缓存键一致：

class PrecacheImages {
  Future<List<String>> getImageURLs() async {
    // 读取本地缓存
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? cachedUrls = prefs.getStringList('carousel_image_urls');
    int? cacheTimestamp = prefs.getInt('carousel_cache_timestamp');
    
    // 缓存未过期则直接返回
    if (cachedUrls != null && cacheTimestamp != null && 
        DateTime.now().difference(DateTime.fromMillisecondsSinceEpoch(cacheTimestamp)).inDays < 7) {
      return cachedUrls;
    }

    try {
      Reference storageRef = FirebaseStorage.instance.ref().child('Production-Photos-Storage');
      final ListResult result = await storageRef.list();
      List<String> imageURLs = await Future.wait(
          result.items.map((item) => item.getDownloadURL()).toList());
      
      // 保存到本地缓存
      await prefs.setStringList('carousel_image_urls', imageURLs);
      await prefs.setInt('carousel_cache_timestamp', DateTime.now().millisecondsSinceEpoch);
      return imageURLs;
    } catch (e) {
      print(e);
      return cachedUrls ?? [];
    }
  }

  // 其他方法保持不变
}

方案2：用CachedNetworkImage自身逻辑预加载

放弃手动precacheImage，直接利用CachedNetworkImage的缓存机制预加载，确保磁盘缓存生效：

// 修改PrecacheImages的awaitCacheComplete方法
Future awaitCacheComplete(List<String> imageURLs) async {
  await Future.wait(
    imageURLs.map((url) => CachedNetworkImageProvider(url).resolve(ImageConfiguration.empty)).toList(),
  );
}

方案3：配置CachedNetworkImage缓存参数

明确设置缓存策略，确保磁盘缓存被正确复用：

CachedNetworkImage(
  filterQuality: FilterQuality.medium,
  imageUrl: imageURLs[index],
  fit: BoxFit.cover,
  width: 125.w,
  cacheManager: DefaultCacheManager(),
  options: const CacheOptions(
    maxAge: Duration(days: 7), // 设置缓存有效期
  ),
)

方案4：保持首页状态避免内存缓存回收

使用AutomaticKeepAliveClientMixin让首页保持状态，防止内存缓存被系统回收：

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  List<String> imageURLs = [];

  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  void initState() {
    super.initState();
    PrecacheImages precacher = PrecacheImages();
    precacher.getImageURLs().then((urls) {
      setState(() {
        imageURLs = urls;
      });
      precacher.awaitCacheComplete(urls);
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    return Scaffold(
      // 首页UI代码
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              submitPhotoViewTabletRoute,
              arguments: imageURLs,
            );
          },
          child: const Text('进入轮播页'),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Jason Bennett