V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
maomaomao001
V2EX  ›  问与答

有没有实践过 Flutter 的开发者 , 为什么说它是原生性能呢 ?

  •  
  •   maomaomao001 · 2019-12-16 12:15:56 +08:00 · 6569 次点击
    这是一个创建于 1805 天前的主题,其中的信息可能已经有所发展或是发生改变。

    昨天看了半天 flutter 写了 hello world。 最大的感受就是 Android 虚拟机在 windows 系统上终于飞快了啊,感觉和真机差不多了速度 。

    然后,具体到 flutter 的话 ->

    1. 不是说它的性能媲美原生应用吗 ? 然而,我实践的结果是 最简单的 slider (滑动条) 联动,它有时候好像也跑不到 60 帧啊, 性能检测工具经常飘红 , 所以它是不是真的能有和原生一样的体验 ?

    2. 后来我返回去看了看它的架构 , 感觉明明就是翻版 canvas 呀 ?(也许我理解错误) ,react native 好呆也是调用原生控件才会说自己能用原生性能 ,flutter 明明就只是全新的画板(感觉有点类似游戏开发中的渲染引擎),而且实现还不全 (只支持 Android,ios, 最近好像 web 版本和 mac 版本在测试中 ,windows/linux 版本没看到消息) , 能不能说说他们做一个全新画板的意义在哪里?

    3. 语言用的 Dart , 这个感觉用起来问题不大 , 可是 为什么他们用这个语言呢 ? AOT 编译的话 , 以后 typescript 的最严格模式有没有可能会做到 类似呢 ? 可以 JIT + VM, 开发完了,AOT 编译到指定平台 ?

    4. 你们看好 flutter 吗?

    大家能讲讲自己在 flutter 实践中遇到的问题(坑,或者好的方法之类的) 吗?

    41 条回复    2020-03-18 09:40:24 +08:00
    maomaomao001
        1
    maomaomao001  
    OP
       2019-12-16 12:20:39 +08:00
    还有这个,嵌套写法大家怎么看呢 ? 你们觉得以后会出 类似 jsx 的 dsx 之类的吗?

    第 8 分钟开始
    bilibili
    av79096823
    hst001
        2
    hst001  
       2019-12-16 12:33:08 +08:00 via Android   ❤️ 1
    类似游戏引擎,暴露 API 给上层,现在地球上都是这样,原生也是。至于慢的问题试试在 release 下跑跑看效果。
    optional
        3
    optional  
       2019-12-16 12:40:54 +08:00 via iPhone   ❤️ 2
    现在就两个端。flutter 优势并不明显(节约了一个平台的开发量,但是需要踩两个平台兼容性的坑,还要对一些原生功能做取舍)
    morethansean
        4
    morethansean  
       2019-12-16 12:41:16 +08:00
    按你的说法,所有 ui 都是 canvas,原生 ui 也是 canvas...
    maomaomao001
        5
    maomaomao001  
    OP
       2019-12-16 12:42:45 +08:00
    而且,我觉得是个极其基础的功能 (配置保存 , 类似 Android 开发里的 sharedpreference 之类的),也才最近才出官方库的样子 ...
    maomaomao001
        6
    maomaomao001  
    OP
       2019-12-16 12:44:52 +08:00
    @morethansean 额,从某种角度,这么说好像也没什么问题 ,but (他们为什么不试试在现有的 canvas 上做这些功能呢... )
    WildCat
        7
    WildCat  
       2019-12-16 12:49:11 +08:00
    @maomaomao001 嵌套很容易重构为更小的 component,在 VSCode 和 IntelliJ 里都很容易直接 extract widget。把 flutter 应用到实际项目里避免不了这样的重构。真正用的时候并不会存在这个问题。

    性能的话,根据个人感知,iOS 上优化反而差一些。Android 性能比较好。
    maomaomao001
        8
    maomaomao001  
    OP
       2019-12-16 12:51:32 +08:00
    @hst001

    我昨天是用了差不多这样的联动滑动条 (没试 relese 版本) ,就是 Android studio ( flutter plugin )自带的那个看帧数的工具 , 真的是一大段红 (渲染耗时 超过 16ms )

    ```
    import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
    }
    }

    class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);

    final String title;

    @override
    _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;
    double s = 0;

    void _incrementCounter() {
    setState(() {
    _counter++;
    });
    }

    void setSVal(double v) {
    setState(() {
    s = v;
    });
    }

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text(widget.title),
    ),
    body: Center(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Text(
    'You have pushed the button this many times:',
    ),
    Text(
    '$_counter',
    style: Theme.of(context).textTheme.display1,
    ),
    Slider(
    min: 0,
    max: 100,
    value: s,
    onChanged: setSVal,
    ),
    CupertinoSlider(
    min: 0,
    max: 100,
    value: s,
    onChanged: setSVal,
    ),
    Text('$s'),
    ],
    ),
    ),
    floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
    ),
    );
    }
    }


    ```
    maomaomao001
        9
    maomaomao001  
    OP
       2019-12-16 12:53:11 +08:00
    @WildCat 可能真的是 relese 出来真的很快吧 , 不过,我的直观感受,flutter 明显比 react native 不流畅...
    Kilerd
        10
    Kilerd  
       2019-12-16 12:54:29 +08:00
    你要知道最开始 flutter 就是为了推广 Dart 服务的。 你说 ts 能不能做到 Dart 这样,肯定可以,但是其中的因由和利益关系决定了 Dart 应该不会换。
    hst001
        11
    hst001  
       2019-12-16 13:10:01 +08:00   ❤️ 2
    @maomaomao001 #6 这是做 UI,又不是通用游戏引擎,就算游戏引擎也有很多厂商选择自研,底层服务设计主要还是看上层需求。要考虑状态、结构管理,可能包括栅格化等,这里的需求就是我们看到的 flutter 框架那一套规则了。

    如果你不是发 debug 包出去,简单应用性能问题不是问题,复杂应用则需要对 flutter 有深入一些的了解,知道如何避免一些低性能的处理方法(我感觉说了一句废话,哪门语言不是这样子)。
    souths
        12
    souths  
       2019-12-16 13:58:49 +08:00
    可以这么理解,开发时跑的是网页,慢,上线跑的是二进制文件,快。但是这个其实是 UI 框架非 UI 部分还是需要原生支持
    ai277014717
        13
    ai277014717  
       2019-12-16 14:03:51 +08:00
    1 Release/AOT 才是性能优化的版本
    2 绘制引擎从底层统一 UI 差异比 RN 更彻底,面向未来嵌入式系统
    3 自带类型,推导方便,优化方便。ts 应该能达到同样效果
    4 中立
    wangxiaoaer
        14
    wangxiaoaer  
       2019-12-16 14:04:19 +08:00
    @maomaomao001 #1 你说的 canvas 是不是想表达类似 java swing 那样每个组件都自己重新绘制?
    lagoon
        15
    lagoon  
       2019-12-16 14:15:34 +08:00   ❤️ 1
    借用大佬的话,瞬间明白。

    Android -> Skia -> CPU/GPU。
    Flutter -> Skia -> CPU/GPU。
    React Native -> Android -> Skia -> CPU/GPU。

    说完了。
    maomaomao001
        16
    maomaomao001  
    OP
       2019-12-16 14:16:15 +08:00
    @wangxiaoaer 可能算吧 ,我的点在于
    以前的 react native -> 写 js 代码 -> 通过桥去生成操作原生控件 , 比如 rn 写的按钮,出来的就是平台本身的按钮

    但是 flutter
    flutter -> 写 dart 代码 -> 用 skia (canvas) 画出组件 , 比如 flutter 写按钮,这完全和平台没关系了感觉 , 可能是为了,以后跨更多平台吧
    maomaomao001
        17
    maomaomao001  
    OP
       2019-12-16 14:17:46 +08:00
    @lagoon 这就不太对吧 ?
    Android -> Skia -> CPU/GPU

    android1 原生也会用 skia 绘制控件 ? 那可就真的厉害了
    maomaomao001
        18
    maomaomao001  
    OP
       2019-12-16 14:20:15 +08:00
    @lagoon 刚刚查了一下,skia 好像还真是 android 渲染层框架
    lagoon
        19
    lagoon  
       2019-12-16 14:22:14 +08:00
    @maomaomao001
    有什么问题? Skia 本来就用在 Android 上,又不是为 Flutter 搞的。
    在 Flutter 都还没有的是的,Skia 就是 Android 的图像引擎啊。

    当然,更细致的分析,得有大佬回答,我的水平也就说成这样了。
    TimLang
        20
    TimLang  
       2019-12-16 14:23:48 +08:00
    觉得嵌套问题的,建议用 ide,比如 android studio,这都不是事,而且 dart 非常好学,比 oc 或是 swift 简单多了,前端上手

    应该没什么问题。
    maomaomao001
        21
    maomaomao001  
    OP
       2019-12-16 14:23:57 +08:00
    @lagoon 话说,有没有可能,rn 是不是也许也能那么做 , 不调用系统控件了, 直接用 skia 自己画
    TimLang
        22
    TimLang  
       2019-12-16 14:25:43 +08:00   ❤️ 1
    而且很多小公司开发人力有限,做些没什么技术壁垒的 app,比如电商 app,用 flutter 很方便,做一套,再稍微改改,两端就出来了。
    lagoon
        23
    lagoon  
       2019-12-16 14:27:25 +08:00
    @maomaomao001
    我猜,这就是亲儿子的好处了?开玩笑开玩笑。
    至少现在 RN 不是这样。

    或许目的不同吧。Google 搞 Flutter,也不单单要搞 Android&iOS,几乎肯定还有 Fuchsia OS。
    sunrain
        24
    sunrain  
       2019-12-16 14:37:05 +08:00   ❤️ 1
    Unity"抄"了一版 Flutter,名曰 UIWidgets,支持 Unity 所有平台,但他是个游戏引擎,打包出 apk 较大。
    maomaomao001
        25
    maomaomao001  
    OP
       2019-12-16 14:40:40 +08:00
    @sunrain 这个很强大啊看起来,unity 跨平台,别说 windows 和 mac 了 ,也许连 ps4,xbox 都能上了
    sunrain
        26
    sunrain  
       2019-12-16 14:42:10 +08:00
    @maomaomao001 #25 是的,用法跟 Flutter 几乎无异。
    loshine1992
        27
    loshine1992  
       2019-12-16 15:04:27 +08:00   ❤️ 1
    Q:滑动卡顿
    A:打 Release 包就不卡了

    Q:Flutter 为什么用 dart ?
    A:dart 开发组就在旁边,有问题反馈和解决很快。
    userdhf
        28
    userdhf  
       2019-12-16 15:39:37 +08:00
    你说的没错,就是省了 dom 的消耗。本质就是外挂了个画布
    wvitas
        29
    wvitas  
       2019-12-16 15:42:45 +08:00
    据反馈,flutter 在高刷新率的手机上表现的不好,有待测试及验证
    janus77
        30
    janus77  
       2019-12-16 16:07:08 +08:00
    为何说媲美原生:因为架构层数和原生一样,RN 等的架构层数要多一层(用于桥接的),从理论上来讲是可以做到原生一样的。
    为啥还卡顿:首先 release 比 debug 强,其次现在引擎还有待更新,所以我的第一点也只是说“理论上”。
    为啥用 dart:优点比较多,最主要的是 AOT 之类,然后是语言特性( dart 和 native 直接的交互,导致他很适合做跨平台),另外就是语法简单(不是简洁),易融入前端圈。
    NG6
        31
    NG6  
       2019-12-16 17:05:35 +08:00
    我只管的感觉就是咸鱼用了以后,体验 不是很好,听说只有详情页用了,但感觉发布页也用了,全是问题,感觉没经过测试就放出来了,这么长时间都没修复,移动光标都移动不了
    v2agedchen
        32
    v2agedchen  
       2019-12-16 17:31:39 +08:00
    列表卡顿是因为 debug 与 release 的编译模式不一样。
    关于 flutter 的性能表现,有一个最直观的 app 《 The history of everything 》可以在 Google play 或者 App store 上面下载使用体验一下。
    如果你用贴吧的话,有一个《贴吧内部版》,也是由 flutter 编写,体验非常好

    或者也可以看看我这个开源项目,感受一下: https://github.com/asjqkkkk/flutter-todos
    miyuki
        33
    miyuki  
       2019-12-16 18:17:24 +08:00 via Android
    楼上这个 app 试了一下,手持 1+7pro 90Hz 肉眼还是感觉帧数没有满的样子
    KeyboardManAnAn
        34
    KeyboardManAnAn  
       2019-12-16 22:39:56 +08:00   ❤️ 1
    这种完全抛弃原生自绘 UI 的套路已经很早就被 Qt 证明了是切实可行的,期待 flutter 在桌面端的表现
    maomaomao001
        35
    maomaomao001  
    OP
       2019-12-16 23:43:24 +08:00
    @v2agedchen Android,845 处理器, 导航进入的时候 , 还有 about 页面上下滑动的时候,非常明显的卡顿延迟感 , 我都感觉我手机出问题了
    v2agedchen
        36
    v2agedchen  
       2019-12-17 09:33:19 +08:00
    @maomaomao001 😂导航页面进入卡顿一下应该是我用代码写的那个动画效果,是代码的问题; about 页面滑动卡顿我没有遇到过,我是 redmi k20 pro
    xzc2677
        37
    xzc2677  
       2019-12-17 10:26:12 +08:00   ❤️ 1
    2. 我也好奇这一点,以前也有类似的产品,为什么这次 flutter 能掀起如此大的风浪(可能是 GG 出品?),游戏届早就用这一套了。包括 Unity, cocos2d,以及一些大厂的自研游戏引擎。
    3. 据说是隔壁组是 Dart 组,就决定是 Dart 了。(近,解决问题快)
    4. 比较担忧的是生态问题。flutter 应该不能复用现在 OC 以及 Swift 的一些轮子( UI 方面)。Android 方面不了解。这部分的轮子都得重新造。机遇和挑战并存吧。
    maomaomao001
        38
    maomaomao001  
    OP
       2019-12-17 10:58:44 +08:00
    @xzc2677 何止 oc swift 没法服用,最关键的,海量的 npm 包没法服用就太难受了
    maomaomao001
        39
    maomaomao001  
    OP
       2019-12-17 10:58:58 +08:00
    复用
    jedrek
        40
    jedrek  
       2019-12-17 11:28:41 +08:00
    @maomaomao001 你试了 Release 的性能了吗?
    phantomlimb
        41
    phantomlimb  
       2020-03-18 09:40:24 +08:00
    我很喜欢 Flutter,学了十天,然后 4 周就写好了一个 app。很有潜力。
    原生 iOS 和安卓开发我都很熟悉,我挺看好 Flutter 的,小工程都可以用 Flutter。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2803 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:51 · PVG 19:51 · LAX 03:51 · JFK 06:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.