闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报(上)

简介: 闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报


 作者:意境、三莅

 

一、 Flutter桥调用请注意结果反馈

 

通过桥来拓展Flutter的能力,是非常通用的Flutter开发场景。常见的包括:网络请求,本地存储,异构页面通信等 。实现功能固然重要,但是如果控制不好返回值,可能会是一个灾难。例如Dart侧代码:

 

void getResult() async {
  dynamic result = await MethodChannel('methodChannelName')
.invokeMethod('methodName', {'params': content});
doOtherJobs();
}

Native 侧代码,以Android代码为例:

 

@Override
  public void onMethodCall(MethodCall call, Result result) {
    switch (call.method) {
      case "methodName": {
        doJob();
                break;
      }
    }
  }

 

如果按上述代码实现,就会出现一个非常隐藏的问题:dart侧代码会一直wait,之后的代码(doOtherJobs)永远不会被执行到了。问题的原因是MethodChannel 并不知道底层的逻辑是否执行完毕。那怎样通知MethodChannel执行完了呢?需要调用如下代码:

 

如下代码调用任一一个即可
result.success();
result.error();
如果没有对应方法的实现可以调用如下代码:
result.notImplemented();

 

问题虽小,但是影响可能很大,一定要小心

 

二、 Flutter await代码带来的潜在并发

 

Flutter使用Dart语言进行开发。Dart语言具备非常友好的并发编程语法。例如async/await。我们在享受并发语法带来便利的同时,也需要深刻理解代码背后的执行逻辑。只有这样,才能避免走入一些“深坑”。

 

首先从最简单的逻辑来看:如果一个函数被标记为async,意味着该函数会被异步执行,函数会返回一个Future对象。函数正常执行的到该函数的时候,并不会停下并等待函数的结果返回,而是直接运行下面的代码。如果想要程序停下,等待函数的执行结果,需要配合await关键字来实现。示例如下:

 

image.png


这里有一个非常有意思的问题,使用await等待异步函数执行,到doJob2函数执行,这中间是不是仅仅执行了doAsyncJob函数内容?来看下面的例子

 

bool needReturn = false;
  Future doJob2() async {
    needReturn = true;
  }
  Future doJob() async {
    if (needReturn) {
      return;
    }
    print('needReturn position1 is $needReturn'); // needReturn == false ?
    await doSomething();
    print('needReturn position2 is $needReturn'); // needReturn == false ?
  }
  Future doSomething() async {
    print('doSomething~~~');
  }

 

第一个问题position1位置的时候needReturn是不是一定是false?

 

答案是yes,因为needReturn == true会在之前执行的时候,直接返回。要想执行到position1,needReturn一定是false

 

第二个问题 position2 位置的时候needReturn 是不是一定是false?

 

答案是不一定!为什么不一定呢?doSomething函数中并没有设置needReturn为true。needReturn会被修改么?答案是有可能,原因是doJob2可能在其他控制流中被执行。

 

看起来position2的上一句就是doSomething,但是在await等待的时候,其他的并发函数也可能被执行,如果doJob2被执行,值就会发生了变化。结论:使用await并发执行以后,记得一定要做变量的重新检查。因为这里虽然代码相邻,但是过程中可能执行大量其他并发函数,核心状态并不像看起来的那么可控。

 

三、 Flutter FPS高不代表一定流畅

 

流畅滚动是优异体验的核心保障。FPS(Frames Per Second)作为页面流畅度的核心度量指标,被广泛使用。FPS本质上度量的是每秒播放的帧数。下图直观对比不同帧率的显示效果。

 

image.png

原文为gif

 

Flutter开发页面,同样广泛的使用FPS来度量页面流畅度。但是Flutter一直有一个“细碎抖动”的问题,也就是页面整体是流畅的,但是在滚动的过程中有明显的细碎抖动,这对用户体验产生了伤害。

 

在实际开发过程中,FPS这一指标对这类抖动问题的度量效率并不高。例如:前900ms刷了50帧,但是最后100ms刷了1帧,最后的FPS值是51,看起来也是一个不错的值。但是用户会在其中明显感知到卡顿。帧率的连贯性是很重要的,即便刷新只有30帧,但是如果一直是这个帧率,用户感知起来也是流畅的。但是如果一下子从50帧掉到30帧用户还是会感知明显的卡顿。所以流畅度的度量需要感知帧率的变化。那Flutter中怎么感知每一帧的变化呢?可以用如下方法获取每一帧的性能数据数据。

 

WidgetsBinding.instance.addTimingsCallback();

 

透过该方法,除了能获取每一帧的整体耗时,还可以细化到build和raster两个主要阶段的耗时。这样能更加深入的做性能问题的排查。数据结构体如下:

 

factory FrameTiming({
    required int vsyncStart,
    required int buildStart,
    required int buildFinish,
    required int rasterStart,
    required int rasterFinish,
    required int rasterFinishWallTime,
    int frameNumber = -1,
  })

 

那么在知道帧耗时的情况,怎么判定是一次卡顿呢?可以从如下两个维度来度量:

 

帧耗时是之前N帧平均耗时的M倍(这里N和M可以根据实际情况调整,例如一般设置成3帧和2倍)

帧耗时超过两帧电影帧耗时(电影帧单帧耗时:1000ms/24≈41.67ms,这是下线,帧耗时超过这个标准,用户能明显感知到卡顿)

 

同时我们也可以通过统计不同分位的帧耗时,更细致感知实际页面渲染情况。例如常见的90分位,99分位帧耗时。大家可以根据实际情况统计。

 

接下篇:https://developer.aliyun.com/article/1225938?groupCode=idlefish

相关文章
|
29天前
|
设计模式 前端开发 测试技术
Flutter 项目架构技术指南
探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture,以及架构模式MVC、MVP、MVVM,如何有机结合使用,打造优秀的应用架构。
Flutter 项目架构技术指南
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
336 0
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
3月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
72 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
49 1
|
3月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
3月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
3月前
|
监控 Dart 安全
创建一个Dart应用,监控局域网上网记录的软件:Flutter框架的应用
在当今数字时代,网络安全变得愈发重要。为了监控局域网上的上网记录,我们可以借助Flutter框架创建一个强大的Dart应用。在这篇文章中,我们将深入讨论如何使用Flutter框架开发这样一个监控局域网上网记录的软件,并提供一些实用的代码示例。
273 1
|
2月前
|
Dart JavaScript
Flutter - Dart 基础(数据类型)
【2月更文挑战第3天】
62 1