背景

近些年隨著Flutter開發(fā)的App不斷涌現(xiàn)，其靈活高效的編程體驗、建設(shè)良好的開發(fā)生態(tài)和后期易維護(hù)等優(yōu)點，逐漸得到開發(fā)者和企業(yè)的認(rèn)可。

Flutter代碼稍作調(diào)整，即可同時編譯、打包出來App和Web/H5站點。后者即為Flutter For Web（簡寫FFW）。例如：若App內(nèi)嵌了Flutter頁面，那么這些頁面就可以被重復(fù)利用，生成M站。

但是FFW直接產(chǎn)出的Web/H5站點，首屏加載速度普遍較慢。另外，深入使用FFW也會發(fā)現(xiàn)，其2種渲染模式在復(fù)雜頁面的交互上，有不同程度的卡頓問題。

針對上述性能問題的解決，作者做了較為詳盡的調(diào)研：本文首先分享了性能優(yōu)化的經(jīng)驗；然后引入element-embedding的概念；最后分享一種探索出的、適用于某些場景的試驗方案。

一.渲染模式及性能優(yōu)化

FFW有2種渲染模式，是由同一套源碼，使用2種不同的命令，打包出來的2套編譯產(chǎn)物。

1.1渲染模式介紹

• html渲染模式：Flutter采用html的custom element，CSS，canvas和SVG來渲染UI元素。值得注意的是，此模式最終產(chǎn)物的html標(biāo)簽數(shù)量十分有限，仍以canvas繪制為核心。這也是導(dǎo)致其不夠“瀏覽器友好”的原因。
• canvaskit渲染模式：Flutter將 Skia 編譯成 WebAssembly 格式，并使用 WebGL 渲染。此模式必需加載wasm內(nèi)核文件和noto字體文件。此模式性能表現(xiàn)、瀏覽器兼容性表現(xiàn)更優(yōu)秀。若是對首屏速度要求較少的場景，如內(nèi)部Web系統(tǒng)，建議使用此模式。

1.2優(yōu)化經(jīng)驗（html渲染）

?1.2.1首屏速度優(yōu)化

• Icon font裁剪。若項目中使用到了MaterialDesign圖標(biāo)字體庫，請使用最新的Flutter SDK，在編譯期間自動對字體資源進(jìn)行了裁剪，并重新生成otf/ttf文件。
• gzip開啟。若Server端開啟gzip，主Javascript文件（main.dart.js）的體積優(yōu)化將超過1倍。
• 分片和hash化。主Javascript文件體積較大，可以利用腳本在每次打包之前，將其拆分成n個子文件；在入口處增加邏輯，用戶在進(jìn)入html后，并行下載n個子文件，最后動態(tài)組裝。
• 可借助flutter_web_optimizer工具庫。打包命令：

flutter build web --web-renderer html --release --pwa-strategy none  
flutter pub run flutter_web_optimizer optimize --asset-base ./

• 主html優(yōu)化。利用傳統(tǒng)前端優(yōu)化方法：defer、preconnect和dns-prefetch等屬性配置。

? 1.2.2 刷新幀率優(yōu)化

• build刷新相關(guān)：

1. 局部刷新。目的是減少rebuild范圍。在大型、復(fù)雜頁面的性能優(yōu)化上，可以利用StreamBuilder或Provider機(jī)制，實現(xiàn)局部刷新。
2. Clean的build方法。不在build方法內(nèi)進(jìn)行邏輯計算。通過DevTools性能監(jiān)測工具，可以發(fā)現(xiàn)用戶交互操作（如滾動長列表）后，build方法可能被頻繁調(diào)用。所以build方法越復(fù)雜，越可能導(dǎo)致卡頓等性能問題。
3. 多使用無狀態(tài)的、靜態(tài)化的Widget。如：若Widget不涉及狀態(tài)，就封裝為StatelessWidget。又如：用得上KeeppAlive模式的Widget，在性能優(yōu)化的時候，也可以加以使用，以獲得Widget的狀態(tài)保持、減少build刷新。

• Scroll組件相關(guān)

4. SingleChildScrollView內(nèi)嵌Column。若情況為“列表item結(jié)構(gòu)復(fù)雜、不統(tǒng)一，且item數(shù)量有限”時建議使用。
5. ListView.builder。若情況為“列表的item結(jié)構(gòu)類似，或長度很長、甚至不限”時使用。其優(yōu)點是可動態(tài)復(fù)用item的資源，節(jié)省內(nèi)存開銷。
6. 可以采用自定義的“彈簧屬性”的physics。自定義的physics可調(diào)整滾動的速度、延伸、回彈效果等。

class AhCustomScrollPhysics extends ScrollPhysics {
  const AhCustomScrollPhysics({ScrollPhysics? parent}) : super(parent: parent);

  @override
  AhCustomScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return AhCustomScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => SpringDescription.withDampingRatio(
        mass: 0.1,   //質(zhì)量，控制滾動的慣性
        stiffness: double.maxFinite, //剛性，滾動收尾速度
        ratio: 0.1,  //damping: 0.1, //阻尼，俗稱摩擦力
      );

1.3優(yōu)化經(jīng)驗（canvaskit渲染）

?1.3.1首屏速度優(yōu)化

• wasm內(nèi)核處理

在主html里配置canvaskit.wasm加載路徑的前綴（最新FlutterSDK支持的功能）。

或者存放在國內(nèi)CDN并使用url前綴。

否則此文件會從Google的一個外網(wǎng)CDN匹配和下載，國內(nèi)訪問速度較慢。

goCanvaskit = () => {
        console.log(target);
        _flutter.loader.loadEntrypoint({
            entrypointUrl: "./flutter_canvaskit/main.dart.js", 
            onEntrypointLoaded: async (engineInitializer) => {
                let appRunnerCanvaskit = await engineInitializer.initializeEngine({
                    hostElement: target,
                    canvasKitBaseUrl: "./flutter_canvaskit/canvaskit/", //前綴處理
                });
                await appRunnerCanvaskit.runApp();
                console.log("canvaskit loaded.");
            }
        });
    };

• noto字體處理。

在入口處（main.dart）里主動下載、加載noto字體。

否則，此文件將從外網(wǎng)CDN匹配和下載；并且加載過程中，界面的文字會展示亂碼。

var fontLoader2 = FontLoader("Noto Sans SC");
fontLoader2.addFont(fetchFont2());
await fontLoader2.load()

Future<ByteData> fetchFont2() async {
  var url = Uri.parse(
    'http://{your-cdn-host}/ah-assets/k3kXo84MPvpLmixcA63oeALhL4iJ-Q7m8w%20%281%29.otf'
  );
  final response = await http.get(url);
  if (response.statusCode == 200) {
    return ByteData.view(response.bodyBytes.buffer);
  } else {
    throw Exception('Failed to load font');
  }
}

?1.3.2刷新幀率優(yōu)化

同html的刷新幀率優(yōu)化。

1.4首屏優(yōu)化數(shù)據(jù)

html模式數(shù)據(jù)分析對比

抽樣測速的數(shù)據(jù)

同內(nèi)容的、Vue.js線上版本，抽樣測速數(shù)據(jù)

首次加載， js大文件列表

1.5分析結(jié)果

FFW的html渲染模式，首開速度已經(jīng)接近傳統(tǒng)Vue.js站點；canvaskit模式的刷新幀率效率，也已經(jīng)接近App端的flutter代碼。但是，后者的首屏速度，由于必要的noto字體和wasm內(nèi)核文件，首開耗時依然過久。

另外，html模式在刷新幀率上有略卡頓的問題。這是由于渲染產(chǎn)物使用了較少的html標(biāo)簽，主要仍依靠canvas繪制；而主流瀏覽器對于canvas繪制的優(yōu)化，遠(yuǎn)沒有html標(biāo)簽、DOM樹成熟。

Google團(tuán)隊已經(jīng)將canvaskit渲染模式作為未來優(yōu)化的方向。為了提升加載速度，在 112 或更高版本的 Chromium中優(yōu)化了wasm的底層支持，以縮小wasm的體積和提升性能表現(xiàn)。但是短期內(nèi)現(xiàn)狀難以得到有效解決。

所以問題歸結(jié)為：首開速度和交互性能，不能兼得。

最新的element-embedding技術(shù)，為解決此“二選一”難題提供了新的思路。

二. element-embedding新功能

element-embedding是Flutter SDK 3.7的新功能；在2023年的Flutter Forward大會上被推出。在Github的Flutter Sample項目，有兩個demo：html+js集成和Angular.js集成。

圖片

? 特性：

1. Flutter的渲染產(chǎn)物，可以作為一個div里的canvas繪制層，而被宿主使用；
2. 這個div可以在任何合適的時機(jī)被開啟渲染（否則不會加載）；
3. Flutter的代碼與它的宿主代碼（Angular.js或Vue.js等），可以通過js函數(shù)通信。

? 優(yōu)點：

1. 低侵入性：與傳統(tǒng)Vue.js等項目的“混合”，不影響宿主的首屏加載速度等。
2. 可交互性：通過js函數(shù)即可完成與宿主的通信。
3. 增加了FFW的使用場景。

三. 替換AB方案

3.1利用FFW打包2種渲染產(chǎn)物

利用FFW可以方便地打包2種渲染產(chǎn)物的特性:

1. 首屏速度較快，使用html渲染產(chǎn)物。
2. 后續(xù)交互性能為了更順滑，使用canvaskit渲染產(chǎn)物。

3.2目標(biāo)是切換過程中用戶無感

1. 前者內(nèi)嵌1個后者的隱藏element-embedding。它會在前者加載完畢后“延遲加載”。
2. 在合適的時機(jī)，把前者的“狀態(tài)參數(shù)”傳遞給后者。
3. 后者更新狀態(tài)后，“靜默替換”展示。

3.3方案描述

圖片

1. html渲染產(chǎn)物作為“宿主”，首先被加載。
2. canvaskit渲染產(chǎn)物是一個內(nèi)部隱藏的element-embedding。
3. 當(dāng)用戶每一次交互“操作”后，都判斷一下canvaskit是否渲染完畢。
4. 如果canvaskit已經(jīng)渲染完畢，則傳參、切換、展示。
5. 用戶的操作狀態(tài)得以保持。由于用戶的交互狀態(tài)（滾動位置、切換位置等）通過傳參得到保持，切換的過程“近乎無感”。

3.4應(yīng)用場景

 頁面交互（滾動、點擊、切換等）操作不太復(fù)雜的場景。 

 最后

在純Web開發(fā)領(lǐng)域，傳統(tǒng)框架（Vue.js，React.js等）仍是優(yōu)先的選擇。但是，經(jīng)過技術(shù)探索，仍能找到FFW的一些應(yīng)用場景。尤其App端Flutter代碼轉(zhuǎn)為Web/H5的需求很強(qiáng)時，可以考慮使用本文最后講述的、經(jīng)過優(yōu)化和重新架構(gòu)的FFW方案。

作者簡介

魏子博

■ 經(jīng)銷商技術(shù)部-移動APP團(tuán)隊

■ 之家新人，移動端全棧開發(fā)經(jīng)驗。