Flutter圖片緩存管理ImageCache原理分析

更新時間：2022年12月12日 15:13:14 作者：WeninerIo

這篇文章主要為大家介紹了Flutter圖片緩存管理ImageCache原理分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

設計: 嗯? 這個圖片點擊跳轉(zhuǎn)進詳情再返回圖片怎么變白閃一下呢?
產(chǎn)品: 是啊是啊! 一定是個bug
開發(fā): 囧囧囧

在開發(fā)過程中, 也許你也遇到過這樣一個場景. 進入一個頁面后,前一個頁面的圖片都會閃白一下. 或者在列表中,加載很多列表項后,之前列表中的圖片都需要重新加載.你有沒有想過這一切的原因是什么呢?

沒錯! 它就是我們今天介紹的主人公 --- ImageCache

可能有些人對ImageCache還有些陌生, 我們在之前的章節(jié)有說過啟動流程時Flutter runApp到渲染上屏,有介紹過其中PaintingBinding這個mixin類.帶著探索的心我們先去看看PaintingBinding都做了一些什么操作呢?

PaintingBinding

PaintingBinding在構造函數(shù)中,除了構建自身的實例.同時也構建了圖片緩存的管理實例.也包括了著色器預熱.

{
    _instance = this;
    // 創(chuàng)建了圖片緩存管理
    _imageCache = createImageCache();
    shaderWarmUp?.execute();
}

著色器預熱可能大部分人都沒有接觸過,我們只需要知道通過著色器預熱,可以提高首次編譯的速度即可.有興趣可以看一下這篇文章著色器預熱; 我們現(xiàn)在把目光重新聚焦到今天的主題, 也就是createImageCache()這里.可以看到它直接返回了一個ImageCache的對象. 這里我們暫且不談ImageCache, 再去看看在PaintingBinding有沒有和ImageCache相關的一些代碼吧.

  @override
  void evict(String asset) {
    // 調(diào)用了rootBundle.evict(asset);
    // 也就是從緩存中移除這個key的資源
    super.evict(asset);
    // 清除所有已顯示和不再用到的圖片緩存
    imageCache.clear();
    // 清除所有實時引用的圖片緩存
    imageCache.clearLiveImages();
  }

  @override
  void handleMemoryPressure() {
    // rootBundle.clear();
    // 當操作系統(tǒng)通知應用程序內(nèi)存壓力情況時調(diào)用。
    // 清除所有的圖片資源
    super.handleMemoryPressure();
    imageCache.clear();
  }

可以看到, 基本上所有的引用都避不開內(nèi)存問題. 也就是文章開頭出現(xiàn)的bug. 那么,為什么會出現(xiàn)閃白呢? 有多種可能,有可能是系統(tǒng)感受到了內(nèi)存壓力調(diào)用了handleMemoryPressure() 方法,清除了圖片緩存,或者在ImageCache中,達到了最大緩存,因此內(nèi)部根據(jù)least-recently-used的原則回收了圖片緩存.所以回頭再看的時候,圖片又重新加載了一遍.自然發(fā)生了閃白現(xiàn)象. 既然知道了原因,那么解決問題的方法:

減少圖片緩存
增大圖片緩存的閥值,讓系統(tǒng)感覺到壓力的閥值提升我們來分別分析一下兩者的可行性

減少圖片緩存

如果要減少圖片緩存, 我們要知道圖片的內(nèi)存是怎么計算的? 圖片內(nèi)存=分辨率*每個像素點大小減少的方法也就出來了:

減少分辨率
也就是降低采樣率.flutter中即cacheHeight和cacheWidth
減少像素點大小
這里也就是像素點的格式,ALPHA_8、RGB_565、ARGB_4444、ARGB_8888、RGBA_F16這些

增大閥值

這里需要去看一下ImageCache中.我們推斷一下,什么情況下一個緩存池會達到閥值呢? 那一定是有新圖片插入,所以總量才會提升才會夠到閥值的門檻.我們找一下有沒有相關的方法. 嗯哼~ 果然有一個_checkCacheSize

{
    ...
    // 只要當前的內(nèi)存超標就會一直執(zhí)行下去
    while (_currentSizeBytes > _maximumSizeBytes || _cache.length > _maximumSize) {
      // 根據(jù)least-recently-used這個邏輯去依次清除圖片緩存
      final Object key = _cache.keys.first;
      final _CachedImage image = _cache[key]!;
      _currentSizeBytes -= image.sizeBytes!;
      image.dispose();
      _cache.remove(key);
    }
    ...
}

說明我們閥值取決于_maximumSizeBytes和_maximumSize, 一個負責最大緩存圖片內(nèi)存,一個負責最大緩存圖片數(shù). 也就是說我們更新這兩個指就可以改變圖片內(nèi)存的閥值.從而減少內(nèi)存回收的頻率.