Categories
程式開發

混合棧開發,AliFlutter如何解決圖片問題


前言

在 Flutter 官方體系內,對混合棧開發支持不夠友好。比如對於圖片資源管理,以及如何對接 Native 圖片庫的問題,社區上已經有一些方案,但或多或​​少存在一些問題,或與 Flutter 圖片加載流程背離較大,難以融合。

與此同時,在電商類應用中,使用 Flutter 實現的長列表多圖頁面,往往面臨著嚴重的性能問題。例如滾動過程,過多的並發圖片請求阻塞了網絡,造成 CPU、內存飆高。在淘寶特價版 Flutter 商品詳情頁面裡,還遇到了更棘手的大 Cell 問題,Flutter List 的回收機制對大 Cell 無能為力,造成內存瘋漲極易 OOM。

為解決這些問題,AliFlutter 基礎容器在 Flutter 官方的 Image Widget 體系裡進行擴展,實現了一套完整的圖片解決方案。具備的能力如下:

  1. 外接原生圖片庫,共享本地文件緩存、內存緩存。
  2. 圖片請求取消功能,解決網絡並發限制引起的排隊加載緩慢,以及無效的解碼、紋理上傳造成資源浪費的情況。
  3. 圖片解碼並發管理,降低 CPU、內存峰值。
  4. 支持 GIF,在播放 GIF 時逐幀上傳紋理,降低內存佔用。
  5. 簡單易用的 Placeholder。
  6. 允許將 Flutter 內置的各種圖片解碼庫剝離,減小包大小。
  7. 業務無感的方式解決 List 滾動時,大 Cell 中的圖片不能動態加載、回收的問題。解決 Native、Weex 體系下的頑疾。

關於大 Cell 問題的解決方案,下週將會推出文章:《細化 Flutter List 內存回收,解決大 Cell 問題》

Flutter 的圖片加載過程

首先介紹一下 Flutter 裡圖片相關的加載邏輯。顯示圖片使用 Image Widget。 Image Widget 創建時,可以指定不同的圖片來源:

  • Image.network

  • Image.file

  • Image.asset

    這些方法創建了背後不同的 ImageProvider。當 Widget 構建並更新 State 時,調用相應的 ImageProvider 進行解析。 ImageProvider 返回一個 ImageStream 對象,並讓這些 Stream 對象共同監聽一個 ImageStreamCompleter。與此同時,ImageProvider 為這個 Completer 提供不同的 load 方法加載來自網絡、文件或資源中的圖片數據(未解碼)。當數據加載好後,調用 Engine 的 instantiateImageCodec 方法創建 C++ Codec(ui.Codec) 對象。由 Codec 負責解碼,上傳 GPU 紋理,生成 ui.Image。全部完成後,回調 Completer,以 Provider 作為 Key 將 Completer 加入緩存,並通知 Widget 重繪。

    混合棧開發,AliFlutter如何解決圖片問題 1

    Flutter 自身提供的 ImageCache,以 ImageProvider 作為 Key 緩存了 ImageStreamCompleter。對於相同的圖片,以及正在下載中的圖片,不會重複加載。當圖片上傳 GPU 完成後,會以圖片的 W * H * 4 更新緩存狀態。所以實際緩存的是 GPU 紋理。使用Flutter 原始Image 組件開發時,將這個緩存大小設置為0,可以一定程度緩解內存壓力(不多餘緩存任何紋理,Widget 銷毀,紋理釋放),但是會造成圖片的反復下載、解碼、上傳GPU,系統開銷較大。

AliFlutter 方案

Flutter 的圖片加載流程抽象完備,我們自上而下進行定制化,在不修改原來鏈路任何代碼的情況下,實現自己的 ImageProvider 和 Codec 對象,對接外部圖片庫。同時,圖片紋理仍然可以保存到 Flutter 的 ImageCache 中,與 Flutter 原始方案完美融合。

混合棧開發,AliFlutter如何解決圖片問題 2

Flutter Widget 層擴展

擴展 Image Widget,指定使用外接圖片庫作為圖片 Provider。

// File: lib/src/widgets/image.dart
Image.external_adapter(
  String src, {
  Key key,
....
  int targetWidth, // 请求的图片的宽
  int targetHeight, // 请求的图片的高
  Map parameters, // 透传给图片库的参数
  Map extraInfo,
  ImageProvider placeholderProvider, // placeholder 可以指定为其它 Provider
}) : image = ExternalAdapterImage(src, // 创建自定义的 ExternalAdapterImage Provider
        targetWidth: targetWidth, targetHeight: targetHeight,
        placeholderProvider: placeholderProvider,
        parameters: parameters, extraInfo: extraInfo),
     super(key: key);

這個方法中的 placeholderProvider 提供了更簡單直觀的方式為圖片指定 placeholder。例如

// 使用本地资源作为 placeholder
Image.external_adapter(
  'https://gw.alicdn.com/tfs/TB1Aa0UcF67gK0jSZPfXXahhFXa-750-140.png',
  placeholderProvider: AssetImage("assets/placeholder.jpg"),
)
 
// 使用另一个网络资源作为 placeholder
Image.external_adapter(
  'https://gw.alicdn.com/tfs/TB1Aa0UcF67gK0jSZPfXXahhFXa-750-140.png',
  placeholderProvider: ExternalAdapterImage("https://alicdn.com/image1024.jpg"),
)

ExternalAdapterImage

該類繼承自 ImageProvider,並在 @override load 方法中創建 ExternalAdapterImageStreamCompleter。 load 方法由 ImageProvider 的 resolve 方法調用,返回圖片數據流管理類。

ExternalAdapterImageStreamCompleter

該類負責圖片的加載,回調邏輯,其主要職責如下:

  • 處理 placeholderProvider,在主圖返回前,讓 Image Widget 顯示 placeholder 圖片。
  • 創建 C++ 層 ExternalAdapterImageFrameCodec 對象,調用 getNextFrame 獲取圖片信息(是否為動圖、幀數、播放時間),以及紋理對象 ui.Image 並通知 Widget 顯示。
  • 對於 GIF 等多幀圖片,循環調用 ExternalAdapterImageFrameCodec 對象的 getNextMultiframe 接口獲取動圖的每一幀 ui.Image 並通知 Widget 顯示。
  • 當無監聽者時,調用 ExternalAdapterImageFrameCodec 的 cancel 接口取消圖片任務。

Flutter Engine 層擴展

ExternalAdapterImageFrameCodec

該類為 C++ 實現,繼承自 DartUI 庫中的 Codec 類,被 Dart 類 ExternalAdapterImageStreamCompleter 持有、管理、調用。

該類與 ExternalAdapterImageProvider 進行交互。主要方法是 getNextFrame , getNextMultiframe,cancel。

ExternalAdapterImageProvider

該類為 Abstract C++ 接口類,定義了需要各平台適配層實現的接口。主要接口如下:

  • void request“(requestId, requestInfo, callback(platformImage, releaseFunc))
    • 該方法向圖片庫請求圖片,圖片庫完成後,通過 callback 異步返回。 platformImage 封裝平台層的圖片對象(如 UIImage),callback 同時返回一個 releaseFunc,Flutter 使用完成該圖片後,調用該方法釋放圖片。
  • void cancel(requestId)
    • 通知圖片庫取消某個請求
  • Bitmap decode(platformImage, frameIndex)
    • 解碼圖片的某一幀,並返回 Bitmap 數據。
  • evaluateDeviceStatus(&cpuCount, &maxMemory)
    • 允許並發的圖片解碼任務數量,以及解碼數據的內存使用量。這個方法會經常被 ExternalAdapterImageFrameCodec 調用,控制多圖加載時的資源消耗。

其中 PlatformImage 結構體定義如下

struct PlatformImage {
  uintptr_t handle = 0;
  int width = 0;                        // width in pixel
  int height = 0;                       // height in pixel
  int frameCount = 1;                   // multiframe image such as GIF
  int repetitionCount = -1;             // infinite
  int durationInMs = 0;                 // in milliseconds
};

執行偽碼如下,多次切換線程也是符合 Flutter 的紋理加載管線。多次判斷 cancel,避免了大量無效操作,降低了列表滾動時的資源消耗。

class ExternalAdapterImageFrameCodec {
  ExternalAdapterImageProvider provider;
  void getNextFrame() {
    async(provider.request( {
      if (cancelled) {
        return;
      }
      async(workerThread, {
        if (cancelled) {
          return;
        }
        bitmap = provider.decode(image);
        async(ioThread, {
          if (cancelled) {
            return;
          }
          ui.Image texture = uploadToGPU(bitmap);
          async(uiThread, {
            if (cancelled) {
              return;
            }
            callbackDart(texture);
          })
        })
      })
    }))
  }
  void cancel() {
    provider.cancel()
    cancelled = true
  }
}

執行時序圖:

混合棧開發,AliFlutter如何解決圖片問題 3

直接將 C++ 接口公開,理論上就可以直接對接手淘圖片庫了。但是C++ 接口使用起來不太方便,且不符合Flutter 規範(對iOS/Mac 平台應該提供ObjC 類,對Android 平台應該只提供Java 類),而且對於平台層圖片對象的處理,由Engine 提供統一實現更為安全。因此,在 Engine 內部,針對 iOS/Mac,以及 Android 平台各提供了一套封裝。

以 iOS 為例,最終在 Flutter.framework 裡對外公開的 ObjC 接口為:

@protocol FlutterExternalAdapterImageRequest 
- (void)cancel;
@end
@protocol FlutterExternalAdapterImageProvider 
- (id)request:(NSString*)url
    targetWidth:(NSInteger)targetWidth
    targetHeight:(NSInteger)targetHeight
    parameters:(NSDictionary*)parameters
    extraInfo:(NSDictionary*)extraInfo
    callback:(void(^)(UIImage* image))callback;
@end

由外部註冊 id 類對接手淘圖片庫,在每次請求時,返回一個支持 cancel 方法的對像用於取消請求。完成後通過 callback 返回 UIImage 對象,可以為 GIF 圖。

對於 Android,最終公開的也是非常簡單的一個 Java 類供外部實現。

AliFlutter 方案的優化

延遲加載

在 ExternalAdapterImageStreamCompleter 中,真正調用 Codec 加載圖片前,會做短暫等待。如果此時 Widget 已經被回收,會將自己從 Completer 的 listeners 中移除(實際添加的 listener 為 Widget 的 State)。等待過後,如果監聽者為空,不會做真實請求。

Flutter 最新代碼(2020.1.30)中,貌似對快速滾動過程圖片的加載也做了優化,避免一些不必要的圖片請求。 Commit 見 https://github.com/flutter/flutter/commit/169529c37064568a17b634968c73a7ff79029dfb

圖片取消

前面提到,當 ExternalAdapterImageStreamCompleter 無監聽者時,會調用 ExternalAdapterImageFrameCodec 的 cancel 方法。

Codec 從平台圖片庫獲取到圖片並最終上傳為紋理(ui.Image)的過程,需要切換多次線程。

在 cancel 方法中,不但會通知圖片庫取消網絡請求,而且記錄標誌位。在切換線程的整個過程中,多次檢查標記位。

經過實際測試,在列表快速滑動或網絡、機器性能較慢時,可以避免大量無效圖片下載、解碼、上傳 GPU 等動作。

UIImage 轉 Bitmap 並發控制

iOS 平台上,將 UIImage 轉換為 Bitmap 不可避免要進行像素的拷貝。一些時候,CGImageGetBitmapInfo(UIImage.CGImage) 獲取到的位圖格式需要進行轉換才可以送給 OpenGL。完成紋理上傳後,拷貝的內存會被釋放。此時,如果過多的圖片同時進行轉換,難免產生內存尖刺。解碼過程復用的 Flutter ConcurrentTaskRunner,該 Runner 並發數量仍然過高(6個左右)。

因此在解碼時,Codec 會動態調用 ExternalAdapterImageProvider 的 evaluateDeviceStatus 接口評估內存狀態,再次控制並發數量。實際使用發現,2~3個並發,圖片的加載速度仍然非常快,同時可以較好地控制解碼過程的臨時內存佔用。

GIF 逐幀上傳

GIF/APNG 動圖是內存消耗大戶,AliFlutter 方案在顯示動圖時,通過 ExternalAdapterImageFrameCodec 的 getNextMultiframe 接口逐幀獲取紋理對象。每個時刻,只會有一幀上傳 GPU,達到節省內存的目的。

開發過程的插曲:Flutter 1.9.1版本的內存洩漏

在調試外接圖片庫的過程中,通過對底層紋理的計數,發現有內存洩漏的情況。淘寶特價版詳情頁面接入 Flutter,並且使用了 Boost。現象為

  • 進入詳情頁面,並退出,反復進入退出。無內存洩漏。 (不進入二級詳情)

  • 進入詳情頁面,點寶貝推薦再進入一個詳情頁面,返回,再返回。產生內存洩漏。

    也就是說使用 Boost 管理多個 Flutter 棧時,只要有二級 Flutter 頁面,就會產生內存洩漏。看上去是整個 Widget 樹洩漏,導致底層的 ui.Image 紋理對像不能釋放。

這個問題排查過程比較困難,主要的方法是不斷簡化詳情頁面,並最終定位出問題的組件。最終發現業務代碼裡只要使用 RaisedButton 就會產生問題。通過一層層的剝去代碼,最終發現了有 Bug 的組件是官方的 InkWell。 RaisedButton 通過多層關係最終使用到了 InkWell 組件。

在 _InkResponseState 類中,didChangeDependencies 方法未從 focusManager 裡移除 listener(其實也就是自己)。導致在 Boost 管理的堆棧中,二級 Flutter 頁面返回時,前一個頁面組件的該方法多次執行,造成洩漏。

// Class _InkResponseState
void didChangeDependencies() {
  super.didChangeDependencies();
  _focusNode?.removeListener(_handleFocusUpdate);
  _focusNode = Focus.of(context, nullOk: true);
  _focusNode?.addListener(_handleFocusUpdate);
  // 原来的代码缺少这一行,导致多次添加 listener 造成组件泄漏。
  WidgetsBinding.instance.focusManager.removeHighlightModeListener(_handleFocusHighlightModeChange);
  WidgetsBinding.instance.focusManager.addHighlightModeListener(_handleFocusHighlightModeChange);
}

該問題在 Flutter 新版中已經修復了,整個代碼完全變了,官方用其它方式避免了這種情況。

這裡走了一些彎路。事後,通過 Dart 調試工具,可以看到出問題的時候 FocusManager 對像不斷增長。提前用 Dart 工具,應該可以更早到定位到問題與使用 FocusManager 有關。

混合棧開發,AliFlutter如何解決圖片問題 4

總結

這個方案完整探索瞭如何遵循 Flutter 官方的圖片加載邏輯,對接外接圖片庫。同時整體方案對官方代碼只添加、不修改,並提供了 ObjC、Java 語言的接口。方案完整度較高,後續可以與官方溝通合入主幹。在圖片加載的完整過程中,多次介入判斷,較好地避免了無效的圖片下載、解碼、上傳紋理工作,減少了系統資源的消耗。

為了避免對手淘圖片庫進行修改,且複用其內存緩存,目前的方案接收平台層解碼後的 UIImage、AndroidBitmap 對象,再獲取其位圖數據上傳紋理。後續可以讓圖片庫返回未解碼的文件數據,交給 Flutter 解碼,整體流程可以再簡化一些。不過目前的方案可以將所有圖片解碼庫從 Flutter 裡剝離,減小包大小,各有利弊。

基於該方案,同時探索瞭如何在 Flutter 中解決大 Cell 中多張圖片同時加載產生的內存飆高問題,下週將會推出:《細化 Flutter List 內存回收,解決大 Cell 問題》 敬請期待。

本文轉載自公眾號淘系技術(ID:AlibabaMTT)。

原文鏈接

https://mp.weixin.qq.com/s/0dJzviKLYXT4j46u3oOwGg