前言

隨著Flutter穩定版本逐步迭代更新，京東APP內部的Flutter業務也日益增多，Flutter開發為我們提供了高效的開發環境、優秀的跨平臺適配、豐富的功能組件及動畫、接近原生的交互體驗，但隨之也帶來了一些OOM問題，通過線上監控信息和Observatory工具結合分析我們發現問題的原因是由于Flutter頁面中加載的大量圖片導致的內存溢出，這也是在原生開發中常見的問題之一，Flutter官方為我們提供的Image widget實現圖片加載及顯示，只有了解Flutter中圖片的加載原理及圖片內存管理方式才能真正發現問題的本質，本文將重點介紹Flutter中圖片的加載原理，使用過程中有哪些需要注意的地方及優化思路和手段，希望能給大家帶來一些啟發和幫助。

基本使用

下面是Image的基本使用方法，image參數是Image控件中的必選參數，它也是圖片數據的來源，可以是Asset、網絡、文件、內存，下面將以我們常用的網絡圖片加載方式為例子講解原理，基本使用如下：

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
  heitht: 100.0
)

文章篇幅有限Image控件的使用方法這里就不在展開講解了

圖片加載流程

Flutter 的圖片加載原理與原生客戶端中的圖片框架加載原理相似，具體可點擊下方大圖查看，加載步驟如下：

1、 區分數據來源生成緩存列表中數據映射的唯一key；

2、 通過key讀取緩存列表中的圖片數據；

3、 緩存存在，返回已存在的圖片數據；

4、 緩存不存在，按來源加載圖片數據，解碼后同步到緩存中并返回；

5、 設置回調監聽圖片數據加載狀態，數據加載完成后重新渲染控件顯示圖片；

大家可能注意到了上面流程圖中的文件緩存部分是灰色的，目前官方還不支持此功能，下面我們會通過源碼逐步分析加載流程及如何通過修改源碼補全文件緩存功能。

源碼分析

下面將通過流程圖結合UML類圖分析圖片加載流程：

這個UML類圖起初一看會感覺稍微有點兒復雜，但仔細看會發現已將圖片數據加載流程分成幾大模塊，下面將按照模塊進行逐步分析，下面將以網絡圖片加載方式為例講解核心類和核心方法功能。

核心類及方法介紹

01 啟動緩存相關類

PaintingBinding：圖片緩存類和著色器預加載，該類是基于框架的應用程序啟動時綁定到Flutter引擎的膠水類，在啟動入口main.dart的runApp方法中創建WidgetsFlutterBinding類時被初始化的，通過覆蓋父類的initInstances()方法初始化內部的著色器預加載（Skia第一次在GPU上繪制需要編譯相應的著色器，這個過程大概20ms?200ms）及圖片緩存等，圖片緩存以單例的方式（PaintingBinding.instance.imageCache）對外提供方法使用，也就是說這個圖片緩存在APP中是全局的，并在這個類中還提供了圖像解碼（instantiateImageCodec）、緩存清除（evict）等功能。

ImageCache：圖片緩存類，默認提供緩存最大個數限制1000個對象和最大容量限制100MB，由于圖片加載過程是一個異步操作，所以緩存的圖片分為三種狀態：已使用、已加載、未使用，分別對應三個圖片緩存列表，當圖片列表超限時會將圖片緩存列表中最近最少使用圖片進行刪除，緩存列表分別是：已使用圖片緩存列表（_cache）、已加載圖片緩存列表(_pendingImages)、未使用圖片緩存列表(_liveImages)，并對外提供以下方法：獲取緩存（putIfAbsent）、清空緩存（clear、clearLiveImages）、驅逐單個圖片（evict）、最大緩存個數限制（maximumSize）、最大緩存大小限制（maximumSizeBytes）等方法。

從源碼中我們可以看到緩存列表是Map類型，Flutter中的Map創建的對象是LinkedHashMap是有序的，按鍵值插入順序迭代，Flutter使用LinkedHashMap存儲圖片數據并實現類似LRU算法的緩存，當緩存列表中的圖片被使用后會將圖片數據重新插入到緩存列表的末尾，這樣最近最少使用的圖片始終會被放在列表的頭部。

當緩存列表增加圖片數據后，會通過最大緩存個數和最大緩存大小兩個緯度進行檢查緩存列表是否超限，若存在超限情況則通過Map的keys.first方法獲取緩存列表頭部最近最少使用的圖片對象進行刪除，直到滿足緩存限制。

啟動緩存小結：

Flutter啟動后在PaintingBinding中創建ImageCache緩存，圖片緩存是全局的并以單例方式對外提供使用方法，緩存默認最大個數限制1000個對象、最大容量限制100MB，緩存中的Map列表通過key/value方式存儲圖片信息，并通過keys.first方法實現的類似LRU算法管理圖片緩存列表，對外提供putIfAbsent()方法獲取已緩存圖像，若緩存中不存在則通過回調圖片加載類中的load()方法加載圖片數據，另外圖片緩存中還提供clear()和evict()方法用來刪除緩存。

02 圖片數據加載相關類

ImageProvider：圖片數據提供抽象類，該類定義了圖像數據解析方法（resolve）、唯一key生成方法（obtainKey）、數據加載方法（load），obtainKey 和load方法均由子類實現，obtainKey方法生成的對象用于內存緩存的key值使用，load方法將按照不同數據源加載圖像數據，常用的Provider子類有：NetworkImage、AssetImage、FileImage、MemoryImage，我們可以看到resolve方法返回的是圖片加載對象類（ImageStream），load方法返回的是ImageStreamCompleter類用來管理圖像加載狀態及圖像數據（ImageInfo）。

ImageStreamCompleter：是一個抽象類，用于管理加載圖像對象（ImageInfo）加載過程的一些接口，Image控件中正是通過它來監聽圖片加載狀態的。

ImageStream：圖像的加載對象，可監聽圖像數據加載狀態，由ImageStreamCompleter返回一個ImageInfo對象用于圖像顯示

NetworkImage：網絡圖片加載類，ImageProvider的實現類，通過URL加載網絡圖像，覆蓋load()方法返回ImageStreamCompleter的實現類MultiFrameImageStreamCompleter，構建該類需要一個codec參數類型是Future，通過調用_loadAsync()方法下載網絡圖片數據獲得字節流后通過調用PaintingBinding.instance.instantiateImageCodec方法對數據進行解碼后獲得Future對象，obtainKey方法我們發現返回的是SynchronousFuture(this)對象，正是NetworkImage 自己本身，我們通過該類的==方法可以看到判斷兩個NetworkImage類是否相等通過runtimeType 、url 、scale 這三個參數來判斷，所以圖片緩存中的key相等判斷取決于圖片的url、scale、runtimeType參數。

MultiFrameImageStreamCompleter：是ImageStreamCompleter的實現類是Flutter SDK的預置類，構建該類需要一個codec參數類型是Future，Codec 是處理圖像編解碼器的句柄也是Flutter Engine API的包裝類，可通過其內部的frameCount變量獲取圖像幀數，分別處理單幀和多幀（動態圖）圖像，內部的getNextFrame()方法獲取每幀的圖像數據并創建Image控件中渲染需要的ImageInfo數據，調用onImage方法將ImageInfo返回給Image控件。

圖像數據加載小結：

上面以網絡圖像加載流程分析，首先通過ImageProvider的resolve()方法創建ImageStream對象，obtainKey()方法創建圖像緩存列表中的唯一key（取決于圖像url和scale），通過load()方法加載圖像數據并返回MultiFrameImageStreamCompleter對象，并將其設置給ImageStream中的setCompleter()方法添加監聽圖像加載完成狀態，圖像數據通過Codec 處理幀數分別處理最終創建ImageInfo對象通過ImageStreamListener的onImage方法返回給Image控件。

03 圖片渲染相關類

_ImageState：是Image控件創建的State類，通過調用ImageProvider的resolve()方法解析圖片數據，resolve()方法返回的ImageStream對象，通過addListener()增加圖片解析狀態監聽，通過ImageStreamListener的onImage回調中獲取圖片數據（ImageInfo）加載完成狀態，onChunk回調監聽數據加載進度，onError監聽圖片加載錯誤狀態，最終通過調用setState進行數據更新繪制。

細心的同學會發現ImageProvider的實例對象（widget.image）被ScrollAwareImageProvider包裝了一下又重新創建了一個provider，在ScrollAwareImageProvider內部主要是重寫了其中的resolveStreamForKey()方法，Flutter SDK 1.17版本中對圖片解析增加了快速滾動優化，當判斷當前屏幕處在快速滾動狀態時，則將圖片解析過程延遲下一幀幀尾進行。

RawImage：RenderObjectWidget的子類，重寫createRenderObject方法創建RenderObject子類。

RenderImage：渲染樹中RenderObject的實現類，Flutter的三棵樹Widget、Element、RenderObject ，而RenderObject是負責繪制渲染的，RenderImage重寫performLayout()方法度量渲染尺寸并布局，重寫paint()方法獲取畫布Canvas，Canvas是記錄圖片操作的接口類，通過參數處理圖片鏡像、裁剪、平鋪等邏輯后調用的drawImageNine()和drawImageRect()方法將圖片合成到畫布上最終調用Skia引擎API進行繪制。

圖片渲染小結：

Image控件中通過調用ImageProvider的resolve()方法獲取圖片數據ImageInfo對象，通過setState方法將數據更新給圖片渲染控件（RenderImage），RenderImage中重寫paint()方法根據傳入參數對圖片數據處理后繪制到Canvas畫布上并調用Skia引擎API進行繪制。

總結

經過以上源碼探索我們發現Flutter本身提供了定制化的內存緩存能力，但內存緩存上限默認是100MB，這樣在配置比較低的機器上內存（Flutter+原生）會超出上限產生OOM，所以使用中我們需要獲取機器的實際物理內存去重新調整Flutter端的內存緩存限制大小，通過PaintingBinding.instance.imageCache調用的maximumSize和maximumSizeBytes動態設置合理的圖片緩存限制避免因圖片內存占用過多導致OOM，那么我們在翻閱了Image源碼后還能做些什么呢？請繼續往下看。

未顯示圖像內存優化：

在使用過程中我們發現部分離開屏幕的圖片始終被保存在內存緩存中，結合Image控件生命周期中的deactive()、dispose()等方法，在頁面控件中的圖片未顯示在屏幕上或控件已銷毀時調用圖片緩存中的evict()方法進行資源釋放減少內存開銷。

圖片預緩存處理：

Image控件中提供了precacheImage()方法可以將需要顯示的圖片預先加載到ImageCache的緩存列表中，緩存列表中通過key值區分相同圖片，在頁面打開后直接從內存緩存獲取，可快速顯示圖片。

圖片文件磁盤緩存：

通過查看網絡圖片加載類NetworkImage源碼可以發現，圖片數據下載和解碼過程都是通過_loadAsync()方法完成的，所以我們可以通過改造這個方法中圖片文件下載、讀取、保存過程去增加圖片文件本地存儲、打通原生圖片庫緩存、圖片下載DNS處理等功能。

自定義占位圖、錯誤圖效果：

Image控件中的frameBuilder和errorBuilder參數分別為我們提供了占位圖和錯誤圖的自定義方式，也可使用FadeInImage控件提供的占位圖（placeholder）、錯誤圖imageErrorBuilder等參數，FadeInImage內部實現也是Image控件，感興趣的同學可以查看其源碼實現。

大圖下載進度自定義顯示：

顯示效果：https://flutter.github.io/assets-for-api-docs/assets/widgets/loading_progress_image.mp4

圖片可拉伸區域設置（.9圖）：

RenderImage的paint方法中我們發現在調用Canvas API繪制前會判斷centerSlice參數分別調用drawImageNine()和drawImageRect()方法，Image正式通過centerSlice參數配置圖片的可拉伸區域，參考代碼：centerSlice: Rect.fromLTWH(20, 20, 1, 1)，L：橫向可拉伸區域左邊起始點位置，T：縱向可拉伸區域上邊起始點位置，W：橫向可拉伸區域寬度，H：縱向可拉伸區域寬度。

未來規劃

本文介紹了京東APP中Flutter探索遇到的問題以及圖片的加載原理和使用過程中的一些技巧，隨著Flutter SDK版本迭代更新，我們將繼續對圖片加載框架進行優化，原生開發中的多個優秀圖片框架已經經歷了大量用戶的考驗這也一直是我們渴望在Flutter上復用的能力，所以我們也在積極探索原生和Flutter中圖片內存共享方案，我們希望這個增強能力是非侵入式的，我們也在嘗試外接紋理等方案，這塊技術細節進展將在后續文章中繼續和大家一起探討。

審核編輯：劉清