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. LG P5244 [USACO19FEB] Mowing Mischief P

    \(\text{Code}\) #include <bits/stdc++.h> #define IN inline #define eb emplace_back using names ...

  2. 随时代变迁而进化的治疗策略不断提高RA无药缓解机会[EULAR2015_SAT0058]

    随时代变迁而进化的治疗策略不断提高RA无药缓解机会 SAT0058 DMARD-FREE SUSTAINED REMISSION IN RHEUMATOID ARTHRITIS: AN OUTCOME ...

  3. DevOps 与 FinOps:二者可以协同吗?

    DevOps 是一个强调开发人员和运营团队之间的协作和自动化以创建更高效的软件开发生命周期的过程.随着云业务成本逐年攀升,甚至超过传统基础设施成本,许多企业开始转向 FinOps 以有效降本增效.Fi ...

  4. 初学 Canvas

    画布的概念 Canvas(画布)可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.画布在 HTML5 中是通过canvas标签来表现,通过 JavaScript 提供的画布 API, ...

  5. 基于IGServer的Web地图要素增删改查

    1. 引言 MapGIS IGServer 是中地数码的一款跨平台GIS 服务器产品,提供了空间数据管理.分析.可视化及共享服务 MapGIS IGServer的下载(试用)地址:MapGIS IGS ...

  6. Mybatis-概览地图

    思考: "为什么在使用 Mybatis 的时候,只需定义一个接口,不用写实现类就能使用XML中或者注解上配置好的SQL语句,就能完成对数据库 CRUD 的操作呢?" 这是因为用到了 ...

  7. Vue项目安装less和less-loader

    第一步: 查看webpack和webpack-cli是否安装打开cmd,通过命令查看 webpack -v webpack-cli -v 如果没有安装,要先进行安装 可以通过 npm view web ...

  8. Shiro+SpringBoot前后端分离中跨域,sessionId,302问题

    1.解决跨域 @Configuration public class CorsConfig { public CorsConfiguration buildConfig() { CorsConfigu ...

  9. 马哥教育第一周作业N67044-张铭扬

    1. 图文并茂解释开源许可证 GPL.BSD.MIT.Mozilla.Apache和LGPL的区别? 1)MIT许可证:MIT是六种开源许可证中最自由宽容,它允许使用者自由修改后无需放置版权说明并且可 ...

  10. 学编程很盲目?不会代码?你可以来瞧瞧这本。是一本难得的Python 入门手册。

    Python语言及其应用,pdf高清免费下载地址 获取码:d414 内容简介  · · · · · · 本书介绍Python 语言的基础知识及其在各个领域的具体应用,基于最新版本3.x.书中首先介绍了 ...