flutter 性能知识

https://flutter.dev/docs/perf/rendering/best-practices
https://www.jianshu.com/p/ca3a40b57f5a
https://www.sunmoonblog.com/2020/01/10/flutter-performance-tools/
https://developer.aliyun.com/article/753993

launch.json

"configurations": [
        {
          "name": "Flutter profile",
          "request": "launch",
          "type": "dart",
          "flutterMode": "profile"
        }
      ]
  • maintainState

ModalRoute中的参数maintainState。其意义为:已经不可见(被上面的盖住完全看不到啦~)的组件,是否还需要保存状态。OverlayEntry类源码中说maintainState设置为true是昂贵的,但是如果maintainState为false,那当不可见时,对应的页面会被销掉,如果pop回去时重新创建的(State 会跑initState方法),那上个页面的状态就无法保持了。这可能也是MaterialPageRoute默认maintainState为true的原因。

  • 局部刷新小部件

  • saveLayer()是昂贵的

这里的saveLayer()是说canvas的saveLayer()方法。一般用于合成特殊效果

  • 剪辑不会调用saveLayer()(除非通过明确请求Clip.antiAliasWithSaveLayer),所以这些操作不像Opacity那样昂贵,但是剪辑仍然很昂贵,
  • 透明图像不要使用Opacity,可以用以下代码
Image.network(
 'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
color: Color.fromRGBO(255, 255, 255, 0.5),
colorBlendMode: BlendMode.modulate
)

可能触发saveLayer()并可能代价高昂的其他小部件:

  • ShaderMask
  • ColorFilter
  • Chip:可能导致saveLayer()如果disabledColorAlpha != 0xff
  • Text— saveLayer() 如果有overflowShader

避免调用saveLayer()

  • 要在图像中实现淡入淡出,请考虑使用 FadeInImage小部件,该小部件使用GPU的片段着色器应用渐变的不透明度。有关更多信息,请参阅Opacity文档。
  • 要创建带有圆角的矩形,而不是应用剪切矩形,请考虑使用borderRadius许多小部件类提供的属性。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。