在实际的Flutter开发中,能够发现编辑器AS会提示在组件之前加上const关键字,

实测分析Const在Flutter中的性能表现

这是由于Flutter2之后,多了一个linter规则,prefer_const_constructors,官方主张首选运用const来实例化常量结构函数。

实测分析Const在Flutter中的性能表现

那const效果是什么?并且在功能方面对整个app有多大的提升?

一、Const的效果

const 是 constant 的缩写,原意是不变的,不易改变的意思,包括C++、go中都有此关键字,相同的,在Flutter中也是表示不变的意思。具体来看看下面的代码。

Row(
      children: [
        Image(image: NetworkImage('https://www.6hu.cc/files/2023/02/1676915306-115c89dbff48ef4.jpg')),
        Text("$_counter")
      ],
    );

这是一个水平布局,内部排列了一个Image和Text,留意这个Text的是有一个动态的值_counter。

为了能够更新_counter,必定要调用setState() 办法。咱们都知道,假如调用setState() ,那么整个Row包括Image和Text都会主动递归重建。每调用一次,父widget和子widget都会重建一次,那么在杂乱的UI和事务场景下,就加深了app的不稳定性。

这就是为什么在开发中,要尽量在小的规模去运用setState,防止不必要的重建任务。为了优化这个问题,官方就更新出了const关键字,被const润饰的widget,就代表永远不会被重建。

比方在上述代码中Image是不可变的,Text是可变的,那么在Image之间加上const润饰,当调用setState() 时,只会更新Text,Image不会被重新构建。

Row(
      children:  [
        const Image(image: NetworkImage('https://www.6hu.cc/files/2023/02/1676915306-115c89dbff48ef4.jpg')),
        Text("$_counter")
      ],
    );

二、功能剖析

2.1 widget rebuild状况

DevTools供给了一个查询widget rebuild状况的东西,在 Widget rebuild stats 中勾选 Track widget rebuilds 来查看 widget 的重建信息。重建信息包括 Widget 名字、源码方位、上一帧中重建次数、当时页面中重建次数。

实测分析Const在Flutter中的性能表现

在每个widget之前都有一个小图标,

  • 黄色旋转圆圈 – 重建次数过多
  • 灰色圆圈 – 未重建
  • 灰色旋转圆圈 – 重建

为了进行const比照,咱们以上面代码为例,

Row(
  children:  [
  const Image(image: NetworkImage('https://www.6hu.cc/files/2023/02/1676915306-115c89dbff48ef4.jpg')),
  Text("$_counter")
  ],
);

在Image前加上const,Text则不加,当调用setState时,观察两个widget的状况。

实测分析Const在Flutter中的性能表现

清楚的发现,没加const的Image widget前面的圆圈在旋转,则表示Image在重建,且重建次数+1。

2.2 内存占用

关于内存,DevTool相同供给了内存剖析东西Memory,接下来结合事例进行剖析。

在项目中新建两个类,内部不做额外的动作,

void _buildConstObject(){
  const ConstObject();
}
void _buildConstObjectNot(){
  ConstObjectNot();
}

其中ConstObject 加上const润饰,ConstObjectNot则不进行润饰,在触发build时,两个目标一起进行1000次的创立,

void _doBuild(){
  for(var i = 0; i< 1000;i++){
    _buildConstObject();
    _buildConstObjectNot();
  }
}

翻开内存剖析东西,能够发现未加Const润饰的ConstObjectNot创立了1000个目标,所占用内存约16k,而加了const的ConstObject则能够忽略不计。

留意这儿ConstObjectNot和ConstObject内部是没有做任何widget创立的,假如在实际杂乱的项目中,未运用const,内存将成倍增加。

实测分析Const在Flutter中的性能表现

2.3 流畅性

在DevTool中翻开performance overlay, 在app顶部就会呈现功能图层,这两张图表显现的是运用的耗时信息。假如 UI 产生了卡顿(跳帧),这些图表能够协助剖析运用中卡顿,每一张图表都代表当时线程的最近 300 帧体现。

实测分析Const在Flutter中的性能表现

如上图,第一张图归于raster 线程的功能状况即GPU功能,第二张图显现的UI线程功能体现。
当中垂直的绿色条条代表的是当时帧。每一帧都应该在 1/60 秒(大约 16 ms)内创立并显现。假如有一帧超时(任意图画)而无法显现,就导致了卡顿,图表之一就会展示出来一个赤色竖条。假如是在 UI 图表呈现了赤色竖条,则标明 Dart 代码耗费了大量资源。而假如赤色竖条是在 GPU 图表呈现的,意味着场景太杂乱导致无法快速烘托。

为了验证流畅性,咱们开启了一个动画,动画在规定时间内进行重复性的扩大缩小动作,且分为两个场景,一个场景是在所有widget以及目标前加上const润饰,另外一个场景则什么都不做,比照查看每帧的耗时。

class AnLogo extends AnimatedWidget {
  static final _opacityTween = Tween<double>(begin: 0.1, end: 1.0);
  static final _sizeTween = Tween<double>(begin: 0.0, end: 300.0);
  const AnLogo({Key? key, required Animation<double> animation})
  : super(key: key, listenable: animation);
  @override
  Widget build(BuildContext context) {
    Animation<double> animation1 = listenable as Animation<double>;
    return Scaffold(
      appBar: AppBar(
        title: const Text("动画"),
      ),
      body: Center(
        child: Opacity(
          opacity: _opacityTween.evaluate(animation1),
          child: Container(
            margin: const EdgeInsets.symmetric(vertical: 10.0),
            height: _sizeTween.evaluate(animation1),
            width: _sizeTween.evaluate(animation1),
            child: Image.asset("images/ic_1.jpeg"),
          ),
        ),
      ),
    );
  }
}
no const const
no const const
实测分析Const在Flutter中的性能表现
实测分析Const在Flutter中的性能表现

GPU帧率

GPU
no const均匀最大耗时/帧 9.9ms/frame
const均匀最大耗时/帧 7.6ms/frame

UI线程帧率:

UI线程
no const均匀最大耗时/帧 7.8ms/frame
const均匀最大耗时/帧 7.1ms/frame

从试验结果上看,没有加const的GPU帧率均匀最大到达9.9ms/帧,而加了const的GPU帧率比之降低了约2.3ms;UI帧率(CPU)加const与不加const相差不大,约0.7ms。

三、总结

从上面的测试看,不管是内存占用仍是流畅性,添加const润饰的功能都是优于未添加const润饰的功能,const减少了组件的重建以及目标的创立,进行flutter开发时,在合适的时机去运用const以减少不必要的开支。

引荐阅读:

Flutter实战项目开源

Flutter: ‘ const ‘结构函数的功能剖析