Flutter For Web性能优化和新场景探索

原创魏子博之家技术

关注“之家技术”，获取更多技术干货

总篇216篇 2023年第30篇

背景

近些年随着Flutter开发的App不断涌现，其灵活高效的编程体验、建设良好的开发生态和后期易维护等优点，逐渐得到开发者和企业的认可。

Flutter代码稍作调整，即可同时编译、打包出来App和Web/H5站点。后者即为Flutter For Web（简写FFW）。例如：若App内嵌了Flutter页面，那么这些页面就可以被重复利用，生成M站。

但是FFW直接产出的Web/H5站点，首屏加载速度普遍较慢。另外，深入使用FFW也会发现，其2种渲染模式在复杂页面的交互上，有不同程度的卡顿问题。

针对上述性能问题的解决，作者做了较为详尽的调研：本文首先分享了性能优化的经验；然后引入element-embedding的概念；最后分享一种探索出的、适用于某些场景的试验方案。

1.渲染模式及性能优化

FFW有2种渲染模式，是由同一套源码，使用2种不同的命令，打包出来的2套编译产物。

1.1

渲染模式介绍

html渲染模式：Flutter采用html的custom element，CSS，canvas和SVG来渲染UI元素。值得注意的是，此模式最终产物的html标签数量十分有限，仍以canvas绘制为核心。这也是导致其不够“浏览器友好”的原因。
canvaskit渲染模式：Flutter将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染。此模式必需加载wasm内核文件和noto字体文件。此模式性能表现、浏览器兼容性表现更优秀。若是对首屏速度要求较少的场景，如内部Web系统，建议使用此模式。

1.2

优化经验（html渲染）

►1.2.1首屏速度优化

Icon font裁剪。若项目中使用到了MaterialDesign图标字体库，请使用最新的Flutter SDK，在编译期间自动对字体资源进行了裁剪，并重新生成otf/ttf文件。
gzip开启。若Server端开启gzip，主Javascript文件（main.dart.js）的体积优化将超过1倍。
分片和hash化。主Javascript文件体积较大，可以利用脚本在每次打包之前，将其拆分成n个子文件；在入口处增加逻辑，用户在进入html后，并行下载n个子文件，最后动态组装。
可借助flutter_web_optimizer工具库。打包命令：

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

主html优化。利用传统前端优化方法：defer、preconnect和dns-prefetch等属性配置。

► 1.2.2 刷新帧率优化

build刷新相关：

局部刷新。目的是减少rebuild范围。在大型、复杂页面的性能优化上，可以利用StreamBuilder或Provider机制，实现局部刷新。
Clean的build方法。不在build方法内进行逻辑计算。通过DevTools性能监测工具，可以发现用户交互操作（如滚动长列表）后，build方法可能被频繁调用。所以build方法越复杂，越可能导致卡顿等性能问题。
多使用无状态的、静态化的Widget。如：若Widget不涉及状态，就封装为StatelessWidget。又如：用得上KeeppAlive模式的Widget，在性能优化的时候，也可以加以使用，以获得Widget的状态保持、减少build刷新。

Scroll组件相关

SingleChildScrollView内嵌Column。若情况为“列表item结构复杂、不统一，且item数量有限”时建议使用。
ListView.builder。若情况为“列表的item结构类似，或长度很长、甚至不限”时使用。其优点是可动态复用item的资源，节省内存开销。
可以采用自定义的“弹簧属性”的physics。自定义的physics可调整滚动的速度、延伸、回弹效果等。

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,   //质量，控制滚动的惯性
        stiffness: double.maxFinite, //刚性，滚动收尾速度
        ratio: 0.1,  //damping: 0.1, //阻尼，俗称摩擦力
      );

1.3

优化经验（canvaskit渲染）

►1.3.1首屏速度优化

wasm内核处理

在主html里配置canvaskit.wasm加载路径的前缀（最新FlutterSDK支持的功能）。

或者存放在国内CDN并使用url前缀。

否则此文件会从Google的一个外网CDN匹配和下载，国内访问速度较慢。

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字体。

否则，此文件将从外网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');
  }
}