本文將重點介紹Flutter中圖片的載入原理，使用過程中有哪些需要註意的地方及優化思路和手段，希望能給大家帶來一些啟發和幫助。 ...

前言

隨著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 控制項的使用方法這裡就不在展開了，控制項的參數及API詳情請參閱：https://api.flutter.dev/flutter/widgets/Image-class.html

圖片載入流程

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

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

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

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

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

5、設置回調監聽圖片數據載入狀態，數據載入完成後重新渲染控制項顯示圖片；

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

源碼分析

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

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

核心類及方法介紹

啟動緩存相關類

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()方法用來刪除緩存。

圖片數據載入相關類

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<ui.Codec>，通過調用_loadAsync()方法下載網路圖片數據獲得位元組流後通過調用PaintingBinding.instance.instantiateImageCodec方法對數據進行解碼後獲得Future<ui.Codec>對象，obtainKey方法我們發現返回的是SynchronousFuture(this)對象，正是NetworkImage 自己本身，我們通過該類的==方法可以看到判斷兩個NetworkImage類是否相等通過runtimeType 、url 、scale 這三個參數來判斷，所以圖片緩存中的key相等判斷取決於圖片的url、scale、runtimeType參數。

MultiFrameImageStreamCompleter：是ImageStreamCompleter的子類是Flutter SDK的預置類，構建該類需要一個codec參數類型是Future<ui.Codec>，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控制項。

圖片渲染相關類

_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進行繪製。

總結

以上是 Image 圖片載入原理及源碼分析，那麼我們在翻閱了Image源碼後能做些什麼呢？使用過程中有哪些可以優化的部分呢？讓我們繼續往下看。

圖片緩存池大小限制優化

Flutter本身提供了定製化Cache的能力，所以優化ImageCache的第一步就是要根據機型的實際物理記憶體去做緩存大小的適配，通過PaintingBinding.instance.imageCache調用的maximumSize和maximumSizeBytes動態設置合理的圖片緩存大小限制避免因圖片過多導致OOM。

未顯示圖像記憶體優化

可結合StatefulWidget控制項生命周期中的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中圖片記憶體共用方案，我們希望這個增強能力是非侵入式的，我們也在嘗試外接紋理等方案，這塊技術細節進展將在後續文章中繼續和大家一起探討。