对 Flutter 的一些看法
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 的一些看法的更多相关文章
- 前端架构师亲述:前端工程师成长之路的 N 问 及 回答
问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ...
- 谈谈我对 Flutter 未来发展 和 “嵌套地狱” 的浅显看法
Flutter 未来发展 提到 Flutter 就不得不提到 Fuchsia 系统,这是一个尚未正式发布的操作的系统,引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockhe ...
- Google 以 Flutter 作为原生突破口,移动端即将统一了
Android 的前生今世 Android 系统 Android系统作为全球第一大系统,基于 Java 开发的移动端有着诸多的性能优势. 2018年前 H5 的性能瓶颈和 RN 的停更 导致业界对跨平 ...
- Flutter 布局详解
本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关 ...
- Flutter与Xamarin跨平台移动开发相比
在过去十年中,移动行业经历了巨大的增长,特别是在应用程序开发方面.据Statista报告称,全球智能手机用户超过20亿,预计到2022年底这一数字将增加到50亿以上.在这些智能手机中,近100%在三个 ...
- Flutter跨平台框架的使用-iOS最新版
科技引领我们前行 [前言] 1:先简单的介绍下Flutter,它是一款跨平台应用SDK,高性能跨平台实现方案(暂时讨论iOS和Android), 它不同于RN,少了像RN的JS中间桥接层,所以它的性能 ...
- Flutter的盒子约束
由Expanded widget引发的思考 设计稿如下 布局widget分解 很常见的一种布局方式:Column的子widget中包含ListView @override Widget build(B ...
- 【Flutter实战】移动技术发展史
老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...
- Flutter开发初探
目前跨端开发比较热门的就是 React Native 和 Flutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题.对于web前端来说,基于web生态的 React Native 应该是 ...
- 使用Flutter完成10个商业项目后的经验教训
作者:Łukasz Kosman 和 Jakub Wojtczak 原文:https://medium.com/swlh/lessons-learned-after-making-the-first- ...
随机推荐
- 给力的Zstack云主机
合肥光源储存环纵向震荡可视化展示初步结果 前两天做好上面的可视化展示后,想着顺道把那个时间的二维图分析结果给出来吧,就又把纵向震荡的每个束团的频谱和相位顺道可视化显示出来,给计算这些结果的云主机又加点 ...
- git文件管理
一.概念: git:分布式的版本管理工具Gitee(码云):是开源中国社区推出的代码托管协作开发平台,支持Git和SVN,提供免费的私有仓库托管.Gitee专为开发者提供稳定.高效.安全的云端软件开发 ...
- 2.16 win32信息 事件 机制-创建第一个win32程序
事件和信息 事件,例如鼠标的单机 会保存很多数据 这个便是信息 Windows为了能够准确的描述这些信息,提供了一个结构体:MSG,该结构体里面记录的事件的详细信息. typedef struct t ...
- 一个更适合Java初学者的轻量级开发工具:BlueJ
Java是世界上最流行的编程语言之一,它被广泛用于从Web开发到移动应用的各种应用程序.大部分Java工程师主要是用IDEA.Eclipse为主,这两个开发工具由于有强大的能力,所以复杂度上就更高一些 ...
- Swiper第一页与最后一页禁止滑动
resistanceRatio抵抗率.边缘抵抗力的大小比例.值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离. mounted: function() { let _this = this; ...
- JS常用默认行为
form下表示: var forms =document.forms[0]; var forms =document.myform; 找input:var txtName = form.element ...
- ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost:3306' (10061)
ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost:3306' (10061) 报错原因:电脑之前有个5.0.2版本的mys ...
- javascript的布尔运算符
布尔运算符分为四种: 取反运算符(!) 且运算符(&&) 或运算符(||) 三元运算符( ? 表达式1 : 表达式2 ) 取反运算符(!) 用于将任何值转换为布尔值后再变为相反值,即t ...
- Vue npm run test 错误 (node:16672) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx.Unknown word
记一次运行代码上传的测试服务器遇到的坑,昨天上传还好好的,今天上传就报以下错误,以为是忘记下什么插件了,简单粗暴的把node_modules下载重装了,结果还是不行,看看什么情况吧~~~ npm ru ...
- pycharm界面背景色设置
1. 打开Pycharm点击左上角File,然后选择找到Settings点击进入->搜索Appearance -> 选择Appearance->Background Image 选 ...