Flutter性能优化

      性能分析工具

      (1)performance overlay

        开启performance overlay后,Flutter APP上将显示一个展示一个浮层,浮层中会实时展示当前的UI线程及Raster线程的运行情况。如果都是蓝色竖条,说明界面运行流畅,否则则是出现掉帧。

      

        performance overlay可以直接通过代码开启:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      //开启性能监控浮层
      showPerformanceOverlay: true,

      title: 'MyApp',
      home: MyHomePage(title: 'My Awesome App'),
    );
  }
}

        也可以在Debug过程中,在VSCode右侧的Performance 中点击 Toggle Performance Overlay 开启。

      (2)DevTools

        使用DevTools除了可以像performance overlay那样查看App的运行情况,还会录制具体的每一帧绘制及渲染的详细过程,并且允许用户选择任何一帧,查看其运行详情。

        比较重要的主要是Enhance Tracing中的几个选项

       

        选取Track Widgets Build,可以查看某一帧build执行的详情    

       

        如果发现build执行的层级比较深,则说明是一个比较“大”的Widget执行了重建。那我们就需要研究下这种重建是否是必要的。比如,如果只是其中某个小组件的数据发生了变化,就可以优化只对小组件进行重建。又比如,数据未发生变化,但重建的频率非常高,则需要看一下导致重建的原因,看是否可以取消执行这种不必要的逻辑。

        选取TrackPaints, 则可以追踪当前帧绘制的主要逻辑

       

        如果发现paint的层级比较深,则很可能是有比较大的Widget执行了绘制相关逻辑,那么就可以看下这种大Widget执行重绘是什么引起的,以及是否有必要。如果是小组件的重绘导致的,可以尝试用RepaintBoundary包裹小组件,使得重绘仅限于小组件自身。

        性能优化总结

        (1)图片等资源访问使用内存缓存及本地文件缓存。Flutter对GlobayKey组件有缓存,对构建复杂,并且复用率比较高的组件,合理使用GlobayKey可以提升性能。但需注意, 使用GlobayKey查找组件state是全局查找,有较大性能开销,查找不能滥用

        (2)提高build效率:避免大的widget反复重新build:将需要重新build的子widget改为自定义的statefulWidget, 在该widget内调用setState进行重新构建,而不是对整个大的widget都重新构建; 或者用consumer实现局部刷新。

        (3)提高Paint效率, 需要重绘的widget用RepaintBoundary包住,变为其child,进而创建一个单独的layer,对其重绘制不影响其它组件。适合用RepaintBoundary包住的组件主要是两类, 一是需要频繁重绘的组件,使用RepaintBoundary后就可以不影响其它组件;另一种是绘制比较复杂的小组件,而除了该组件外其他组件不会变化,也适合用RepaintBoundary将其变为一个独立的图层以提升效率。

        (4)尽量多使用const实例或widget 的const构造方法, 能用statelessWidget实现的就不要用StatefulWidget实现。尽量利用缓存,减少组件的重新渲染。

        (5)build方法中耗时使用异步, 更耗时的计算操作可以使用compute启用多线程。但要注意, Flutter中开启线程实际会创建一个新的isolate, 线程启动不仅耗时,还会增加内存占用,开启线程应避免滥用

        (6)尽量减少Widget子组件的层级。比如Row或者Column组件中减少Padding的使用, 用sizebox来实现组件位置的偏移

        (7)ListView应采用build方法进行按需构建,避免一次性构建过多的item,或者使用性能更好的CustomScrollView;可折叠的listview在折叠状态时,设itemCount为0; 尽量避免设置widget为半透明,避免下方内容不必要的绘制,可以用截图来实现半透效果。

        (8)降级CustomScrollView,ListView上下各250高度的执行渲染,这就是预渲染区。预渲染区在性能较差机器可以通过参数调整到更小的高度。此外,Flutter为提升Listview滚动性能, 默认会用widget包裹Listview中的子组件,并让被包裹的组件仅绘制一次,但这会带来更大的内存占用。如果内存资源比较稀缺,可以通过ListView的addAutomaticKeepAlives和addRepaintBoundaries属性禁用该特性。

ListView.builder(
  ...
  addAutomaticKeepAlives: false (true by default)
  addRepaintBoundaries: false (true by default)
);

        如果ListView和Gridview中Item的高度时固定的,还可以使用itemExtent实现滚动条大高度滚动的效率。

        (9)减少图像裁剪性能开销: 尽量少用ClipRRect组建,改为使用BoxDecoration组件的image属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/435664.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Conda快速安装的解决方法(Mamba安装)

如果你的Conda安装了,你可能会发现一个问题,就是使用Conda install 安装某个软件时,会特别慢,这时候呢?你会上网去搜,然后大家解决的方法呢。一是告诉你镜像可以下载快一点,二是,Mam…

华为OD机试 - 疫情扩散时间计算 - 矩阵(Java 2024 C卷 200分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷C卷&am…

基于OpenCV的图形分析辨认03

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言:Python,编程软件:vscode或pycharm,必备的第三方库:OpenCV,numpy,matplotlib,os等等。 关于OpenCV&…

spring 注解缓存查询方法使用

spring-boot项目启动类上加注解: EnableCaching 查询方法注解: Cacheable

Sodinokibi勒索病毒最新变种,勒索巨额赎金

前言 Sodinokibi勒索病毒在国内首次被发现于2019年4月份,2019年5月24日首次在意大利被发现,在意大利被发现使用RDP攻击的方式进行传播感染,这款病毒被称为GandCrab勒索病毒的接班人,在短短几个月的时间内,已经在全球大…

缺陷检测:使用PatchCore训练自己的数据集

文章目录 前期准备两种方法 演示运行结果 代码详解见缺陷检测–PatchCore的代码解读 前期准备 必须包含有训练图片(无缺陷图片)、测试图片(缺陷图片)和ground_truth,并且ground_truth必须与对应图片的名称相同。 本文…

学习Java的第一天

一、Java简介 Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 面向对象程序设计语言和 Java 平台的总称。由 James Gosling和同事们共同研发,并在 1995 年正式推出。 后来 Sun 公司被 Oracle (甲骨文)公司收购,Jav…

AI如何为人力资源服务?

组织的核心都是人力资源。从招聘到员工培养,再到评估员工绩效,人力资源(HR)在公司的持续发展中起着至关重要的作用。表面上看,这似乎是一个简单的任务。然而,实际上,这是世界上最复杂和最具挑战…

[数据结构初阶】栈

各位读者老爷好,鼠鼠我好久没写博客了(太摆烂了),今天就基于C语言浅介绍一下数据结构里面的栈,希望对你有所帮助吧。 目录 1.栈的概念及结构 2.栈的实现 2.1定义栈 2.2.初始化栈 2.3.入栈 2.4.出栈 2.5.获取栈…

【Java EE初阶三十】JVM的简单学习

1. JVM 内存区域划分 一个运行起来的 Java 进程,就是一个 JVM 虚拟机,需要从操作系统申请一大块内存,就会把这个内存,划分成不同的区域,每个区域都有不同的作用. JVM 申请了一大块内存之后,也会划分成不同的内…

Git 基于ED25519、RSA算法生成 SSH 密钥

Git 基于ED25519、RSA算法生成 SSH 密钥 基于ED25519算法&#xff0c;生成密钥对命令如下&#xff1a; ssh-keygen -t ed25519 -C "邮箱地址"基于RSA算法&#xff0c;生成密钥对命令如下&#xff1a; ssh-keygen -t rsa -C "<注释内容>"基于ED255…

Day14:信息打点-主机架构蜜罐识别WAF识别端口扫描协议识别服务安全

目录 Web服务器&应用服务器差异性 WAF防火墙&安全防护&识别技术 蜜罐平台&安全防护&识别技术 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/…

【多模态融合】CRN 多视角相机与Radar融合 实现3D检测、目标跟踪、BEV分割 ICCV2023

前言 本文介绍使用雷达与多视角相机融合&#xff0c;实现3D目标检测、3D目标跟踪、道路环境BEV分割&#xff0c;它是来自ICCV2023的。 会讲解论文整体思路、输入数据分析、模型框架、设计理念、损失函数等。 论文地址&#xff1a;CRN: Camera Radar Net for Accurate, Robus…

如何使用 CSS object-fit 进行图片的缩放和裁剪

简介 在处理图片时&#xff0c;你可能会遇到需要保持原始宽高比的情况。保持宽高比可以防止图片被拉伸或压缩而出现失真。解决这个问题的常见方法是使用 background-image CSS 属性。更现代的方法是使用 object-fit CSS 属性。 在本文中&#xff0c;你将探索 object-fit CSS …

如何在有/没有备份的情况下恢复华为上已删除的视频?6 个推荐选项

“我不小心删除了华为手机上的一堆视频。我怎样才能把它们找回来&#xff1f;我在谷歌上也找不到它们”。——来自知乎 在我们日常生活的喧嚣中&#xff0c;意外时有发生。无论是由于华为手机上的无意删除、恢复出厂设置、病毒感染、数据损坏还是系统故障&#xff0c;这些视频…

GEE数据——GEDI04_A_和GEDI02_A_002_MONTHLY出现的数据问题

简介 产品介绍 该数据集包含全球生态系统动力学调查&#xff08;GEDI&#xff09;第 4A 级&#xff08;L4A&#xff09;第 2 版对地上生物量密度&#xff08;AGBD&#xff0c;单位为兆克/公顷&#xff09;的预测&#xff0c;以及对每个采样地理定位激光足迹内预测标准误差的估…

python+django高校澡堂洗浴浴室预约签到管理系统8d8c

本系统在设计过程中&#xff0c;高校洗浴管理系统的出现就有很大的需求。该系统可以很好地解决这些麻烦和问题。 很好地发挥了该开发方式的优势&#xff0c;让实现代码有了良好的可读性&#xff0c;而且使代码的更新和维护更加的方便&#xff0c;操作简单&#xff0c;对以后的维…

前端将html导出pdf文件解决分页问题

这是借鉴了qq_251025116大佬的解决方案并优化升级完成的&#xff0c;原文链接 1.安装依赖 npm install jspdf html2canvas2.使用方法 import htmlToPdffrom ./index.jsconst suc () > {message.success(success);};//记得在需要打印的div上面添加 idlet dom document.que…

文心一言 VS 讯飞星火 VS chatgpt (209)-- 算法导论15.4 6题

六、设计一个 O(nlgn) 时间的算法&#xff0c;求一个 n 个数的序列的最长单调递增子序列。&#xff08;提示&#xff1a;注意到&#xff0c;一个长度为 i 的候选子序列的尾元素至少不比一个长度为 i-1 候选子序列的尾元素小。因此&#xff0c;可以在输入序列中将候选子序列链接…

如何在Linux上为PyCharm创建和配置Desktop Entry

在Linux操作系统中&#xff0c;.desktop 文件是一种桌面条目文件&#xff0c;用于在图形用户界面中添加程序快捷方式。本文将指导您如何为PyCharm IDE创建和配置一个 .desktop 文件&#xff0c;从而能够通过应用程序菜单或桌面图标快速启动PyCharm。 步骤 1: 确定PyCharm安装路…