Flutter的性能优化

前言

本文是就Flutter的数据更新形式来操做，而后经过以观测观测台的状态数据报告，来完成对代码执行效率的监控，并找到突破口。

观测台

不论是Idea仍是Android Studio都提供了观测台的功能。 通常咱们使用的都是Observatory的timeline部分。

我打开的方式通常都是在 terminal中输入 flutter run，若是要使用真机测试则输入 flutter run --profile。成功后会出现如图所示的网址，不过这个网址适合在Google浏览器中进行显示。

通常在timeline中，咱们通常选用Flutter Developer的选项。出现的渲染显示咱们通常会看到gpu和ui的渲染，以及重构过程。

性能优化

在性能优化以前，咱们须要知道Flutter重构的逻辑。 在Android中咱们知道绘制须要的三个步骤是 measure、layout、draw。 而Flutter对应的是build、layout、paint。 他的重构是基于一种标脏和从新建立的方式进行的，因此咱们的性能影响通常来自于一个复杂界面的不断重建。可能你只须要修改一个很小的部分，也就是很小的一个子树须要进行修改，那么在代码没有规范的状况下，可能会出现整个界面的刷新，这样咱们的性能可能就要降低了数倍。 对于个人代码而言，就是整个界面的代码都获得了重建的，可是这是基于自己代码仍是简单的缘由，若是代码是很是复杂的，那会获得怎样毁灭性的结果，也是可想而知。

上文的意思用这张图来表示，就是原本咱们重构的就是实线叉号的子树，可是由于代码的书写缘由，致使咱们的结果重构的虚线叉号的整棵树。因此代码的书写规范在性能优化上起了相当重要的做用。

代码测试

测试代码位于包test:WanAndroid-Flutter

上图是我测试的代码，黑色图形中的数据是经过 Timer自动更新的。

int _num = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _num = timer.tick;
      });
    });
  }
复制代码

在initState()函数中，咱们作了一件事情，就是一个初始化，而且这是一个每1s进行一次更新的。

在源码中，这个数据更新处于两种位置：Main页面、组件化的_buildBottom。

• Main页面：在这个页面中，若是重构，就会发生咱们上述所说的状况，把整个页面所有重构了。
• 组件化的_buildBottomde：将上述的更新代码转移到这个组件中，那么重构的效果就会和上述的同样，固然你能够更进行细化。

经过Observatory的观测，咱们可以看到两种位置进行更新，他们重构所须要进行的步骤是彻底不同的程度的，更况且个人页面逻辑是处于一个还算简单的状态呢。

以上就是个人学习成果，若是有什么我没有思考到的地方或是文章内存在错误，欢迎与我分享。

---

相关文章推荐： 手撕Flutter