Flutter 发布的时候可谓很轰动,相对于 RN 或 PhoneGap 们,它给出了另外一种跨平台方案,更像是 APP 版的 Unity,而且使用现代的声明式 UI,据说能媲美原生性能。很吸引人,所以今天特地了解了一下。

Flutter 自己实现了布局和 2D 图形引擎,不依赖平台提供。实际体验来看,在安卓平台完全和原生性能相当,在 iOS 平台与原生相比还是稍稍能感受到一些不同,主要体现在滚动和动画方面。相信大家都听说过Flutter对应安卓开发意味着什么,网上有很多关于安卓的讨论。本文将以 iOS 开发者的视角来看待 Flutter。

在 iOS 平台,利用高效的 CoreAnimation 和独立进程渲染服务来呈现内容,这是构建性能卓越的原生应用的软件基础。我比较关心性能,一个新技术的出现,如果使用户体验开了倒车,那这门新技术普及的可能就非常小了。所以我们先来看看 Flutter 是如何呈现内容的:

Flutter engine 提供了图形服务、文件 IO 以及事件等核心功能。

由上图可以看出绘制管线主要发生在 UI 任务运行器(UI Task Runner)和GPU任务运行器(GPU Task Runner)上,这2个运行器通常分别跑在各自的线程上。

下面是官方文档的UI任务运行器解释:

  • 根 Isolate 必须告诉引擎需要渲染帧。
  • 引擎将询问平台应该在下一个 vsync 上通知它。
  • 该平台等待下一个 vsync。
  • 在 vsync 上,引擎将唤醒 Dart 代码并执行以下操作
    • 更新动画插值器。
    • 在布局阶段重建应用程序中的 widgets。
    • 布置新构造的 widgets 并将它们绘制成立即提交给引擎的图层树。这里没有任何实际的栅格化; 只有对需要绘制的内容的描述是作为绘制阶段的一部分构建的。
    • 在屏幕上构造或更新包含有关 widgets 的语义信息的节点树。这用于更新平台特定的辅助功能组件。

UI任务运行器主要处理图层布局相关,调用 dramFrame 重建窗口图层树中的所有脏元素等,这里的过程和 CALayer 的 drawInContext 非常相似。

而 Skia 图形库和 TextLayout 等发生在 GPU 任务运行器里,GPU 任务运行器会负责一些 GPU 操作相关的工作,类似于 iOS 平台的独立渲染服务。

我们和 UIKit 比较,Flutter 没有像 UILabel 那样无法在后台线程排版的问题,整体架构也是面向高性能 UI 而构建的,那么为什么还有很多性能差异呢。其实也不奇怪,抛开 VM 和原生机器码的性能差异,苹果在优化方面是精益求精的和有平台针对性的,CoreAnimation 的多进程架构植入 OS 享受着很高的调度特权,Flutter 可能永远也不会比 CoreAnimation 性能更好。但 Flutter 是为跨平台而生的,而且尚处于 Bate 阶段,运行时 VM 以及图形渲染和动画基础结构都有非常多的性能优化空间,如果开发者参与度高或者 Google 开挂扶持,相信改善会非常快。

我们再来看看Flutter的整体架构:

主要分为 Dart 的 Framwork 层、C++ 的引擎层以及平台相关的嵌入层。可见理论上只要适配嵌入层就可以让 Flutter 在任何系统上运行,很期待未来 Flutter 在例如智能家居等嵌入式设备上的表现。

实际测试发现,在 iOS 平台实际启动时还是会先跑完整的原生应用冷启动过程,完了再去启动 Flutter 系统包括注册 Dart VM 等,还是比较耗时的,播放完开机画后会有一段时间的黑屏,我想应该可以通过原生壳来掩盖黑屏改善体验,当然也期待能优化后能让冷启动过程速度更快一些。

总结来看,还是相当看好的,开发体验做的真的很不错,对于一个全新的跨平台方案,性能问题(用户体验)解决后,其他都不是问题。(完)

对 Flutter 的一些看法的更多相关文章

  1. 前端架构师亲述:前端工程师成长之路的 N 问 及 回答

    问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ...

  2. 谈谈我对 Flutter 未来发展 和 “嵌套地狱” 的浅显看法

    Flutter 未来发展 提到 Flutter 就不得不提到 Fuchsia 系统,这是一个尚未正式发布的操作的系统,引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockhe ...

  3. Google 以 Flutter 作为原生突破口,移动端即将统一了

    Android 的前生今世 Android 系统 Android系统作为全球第一大系统,基于 Java 开发的移动端有着诸多的性能优势. 2018年前 H5 的性能瓶颈和 RN 的停更 导致业界对跨平 ...

  4. Flutter 布局详解

    本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关 ...

  5. Flutter与Xamarin跨平台移动开发相比

    在过去十年中,移动行业经历了巨大的增长,特别是在应用程序开发方面.据Statista报告称,全球智能手机用户超过20亿,预计到2022年底这一数字将增加到50亿以上.在这些智能手机中,近100%在三个 ...

  6. Flutter跨平台框架的使用-iOS最新版

    科技引领我们前行 [前言] 1:先简单的介绍下Flutter,它是一款跨平台应用SDK,高性能跨平台实现方案(暂时讨论iOS和Android), 它不同于RN,少了像RN的JS中间桥接层,所以它的性能 ...

  7. Flutter的盒子约束

    由Expanded widget引发的思考 设计稿如下 布局widget分解 很常见的一种布局方式:Column的子widget中包含ListView @override Widget build(B ...

  8. 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...

  9. Flutter开发初探

    目前跨端开发比较热门的就是 React Native 和 Flutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题.对于web前端来说,基于web生态的 React Native 应该是 ...

  10. 使用Flutter完成10个商业项目后的经验教训

    作者:Łukasz Kosman 和 Jakub Wojtczak 原文:https://medium.com/swlh/lessons-learned-after-making-the-first- ...

随机推荐

  1. 【WinForm】窗体之间传值的几种方式

    方法1:设置公共静态变量传值 eg: 1 public partial class mianForm 2 { 3 //声明i 为公共静态变量 4 public static string i = &q ...

  2. CF846E - Chemistry in Berland

    题意:有一颗树,每个点上有 \(b_i\) 东西,从叶子往上的汇率是 \(1:1\),从父亲往下的汇率是 \(k:1\),求能否使每个点的东西都不少于 \(a_i\). 我们发现,从上往下肯定是不划算 ...

  3. API 小白入门教程

    正如汽车行业必须达到一定的规模,才能让企业只生产一个部件.软件产业现在已经足够大了,尤其当你接受所谓的"软件吞噬世界"此类的说法时更是如此.因此,和汽车工业不再生产自己的钢铁一样, ...

  4. 一个ASP中的Base64加密 解密函数代码

    <% OPTION EXPLICIT const BASE_64_MAP_INIT = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstu ...

  5. 第二周作业N67044-张铭扬

    1. 运行脚本可以显示出本机的ip地址 2. 如果ip地址中有3这个数字,那么就打印出当前的系统时间 3. 如果ip地址中不含3这个数字,就批量建立用户magedu_00, magedu_01, .. ...

  6. lg8936题解

    虽然这道题的题目标签有颜色段均摊和并查集,但是这道题的做法与这两个算法并无关系. 考虑从询问的右往左扫描数组.设\(g_i\)表示以第\(i\)个询问为左端点,最大的\(g_i\)令\(sol(1,n ...

  7. 获取小程序toast控件

    Toast 含义 为了给当前视图显示一个浮动的显示块,与dialog不同它永远不会获得焦点 显示时间有限,根据用户设置的显示时间后自动消失 本身是个系统级别的控件,它归属系统settings,当一个a ...

  8. 两张表合并到一个VO里面

    @Overridepublic List<TbRemouldAirELe> findAll() { List<TbRemouldAirELe> list = new Array ...

  9. CAN 接线参考

    汽车CAN总线详解 - 汽车人大空翼 - 博客园 (cnblogs.com) 汽车CAN总线 - helloWorld017 - 博客园 (cnblogs.com) CAN总线布线规范 - 不明白就去 ...

  10. mysql错误号码2003 can't connect to mysql server on 'localhost' (0)解决方案

    找到mysql安装目录下的Bin目录,在cmd中进入这个目录,运行net start mysql 却显示服务名无效 所以此时 首先在MYSQL的安装目录bin下,输入mysqld --install ...