flutter性能如何,Flutter前景

如何评价 Google 的 Flutter

Flutter框架，一言以蔽之就是能够使用一套相同的Dart语言代码同时实现android和ios跨平台应用的框架，同时兼备高性能和快速开发。

相关问答

Q1: 为什么Flutter开发APP性能最接近原生，前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架，支持Android、iOS和WEB终端。1.0版在2018年12月5日发布，目前的最新版本是1.5，它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言：

hello world例子，打印字符串“Hello World!”：

1、没有桥接层

React Native、Weex等技术都是跨终端的框架，然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的：

React Native、Weex等技术多了一个桥接层，所以界面渲染会慢一些，由于UI渲染非常频繁，想要不卡顿，基本上比较难，性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在：

Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

2、编译执行

JavaScript是解释执行的，Dart是编译执行的，性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外，Flutter还提供了自己的小部件，Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。

从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。而React Native通过桥接层访问原生UI，操作频繁就容易出性能问题。

综合所述，Flutter 是性能最接近原生代码 的一种开发框架，未来也会是构建谷歌Fuchsia应用的主要方式，前途不可限量，唯一的问题就是需要学习一门新的语言：Dart，而有Java或者C#语言基础的程序员会比较容易学习。

Q2: Flutter开发性能提升之：如何避免Widget重复Build

问题描述：

在Flutter开发的过程中，当我们获取到新的数据或者数据发生变化，需要去执行setState进行页面刷新的时候，经常会出现不必要的子节点Widget也进行了build，但实际上我们是不想让它再次build，出现这些问题的典型情况是在使用FutureBuilder的时候，例如：

在上面这个示例中，如果再次调用Build方法，则会触发httpCall()的方法。

那么怎样才能避免不必要的部件构建呢？

分析：

在Flutter中，Build方法的设计方式是pure/without side effects，书面意思是无副作用的/纯粹的，简单点理解我们可以将其含义看作不会对外部的方法或者变量产生影响的。这是因为许多外部因素能够触发新的小部件的构建，例如这些情况：

但是，这也意味着Build方法可以不去触发httpCall()的方法或者不修改任何状态。

解决

回归问题，当前我们面临的问题是Build方法造成了副作用，也就是造成了无关的Build调用麻烦。

所以，只要我们使Build方法保持纯粹/无副作用，这样就算多少次调用它，也不会对其他Widget的Build方法产生影响。

在上面的示例中，我们将Widget转换为StatefulWidget，然后提取httpCall()到initState中，这样问题就解决了

另外，还可以使一个Widget能够在不强迫其子部件也构建的情况下进行重新构建。

在Widget的实例保持不变时;Flutter会有意识的不去重建子部件。这意味着我们可以缓存Widget树的某些部分，以防止不必要的重新构建。

最简单的方法是使用const修饰构造函数:

由于const的修饰，即使调用了数百次build，DecoratedBox的实例也将保持不变。

或者你可以这样使用以达到相同的结果:

在这个例子中，当StreamBuilder收到新值的通知时，即使StreamBuilder的Column进行了重构，subtree也不会进行重构。这是因为由于闭包，MyWidget的实例没有改变。

这种模式在动画中经常使用。典型的是使用AnimatedBuilder和所有的*Transition时，例如AlignTransition。

我们还可以将subtree存储到类的一个字段中，但是并不推荐你这样做，因为它会破坏Flutter的热重载。