Flutter性能优化

      性能分析工具

      (1)performance overlay

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

      

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

class MyApp extends StatelessWidget {@overrideWidget 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属性。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CSP考点回顾】前缀和数组

一、一维数组前缀和 前缀和算法是一种用于处理数组的技术,它可以快速计算任何连续子数组的和。适合在多次查询中需要求解多个范围和的情况。使用前缀和算法可以将每次求和的时间复杂度从 O(n) 降低到 O(1)。 前缀和的思想是创建一个新数组 A r r Arr Arr&#xff0…

递增三元组(第九届蓝桥杯)

文章目录 题目原题链接思路分析二分做法1二分做法2双指针做法前缀和解法 题目 原题链接 递增三元组 思路分析 由时间复杂度可知需要至少优化到 O ( n l o g n ) O(nlogn) O(nlogn)才行 而纯暴力枚举三个数组的话: O ( n 3 ) O(n^3) O(n3) 可以考虑将b[]作为标志&…

RabbitMQ 交换器

RabbitMQ 交换器 官方例子 http://www.rabbitmq.com/getstarted.html direct 如上图所示,两个队列绑定到了direct交换器上,第一个队列绑定的 binding key 为 orange ,第二个队列有两个绑定,分别是 black 和 green 。 如上图所示…

基础小白快速入门web前端开发技术------>web概述

Web概述 我们在编程的学习中,随着学习的深入,我们会理解到WEB这个东西,那么 web究竟是个啥,到底该咋用? web,是网站的英文意思,又被称作“下一代Web3.0,互联网”,是在We…

vue在线查看pdf文件

1.引入组件 npm install --save vue-pdf2、pdf组件页面模板 <template><div class"scrollBox" ><el-dialog :visible.sync"open" :top"1" width"50%" append-to-body><div slot"title"><el…

混沌工程-经典案例分享

目录 前言 案例 1、强弱依赖不合理 2、预案不生效 3、异常数据不兼容 4、监控体系缺陷 5、系统缺整体架构设计 总结 前言 我们公司从启动混沌工程到现在已经几乎覆盖了线上的所有核心业务&#xff0c;先后进行过2000次演练共挖掘出120个漏洞。这些漏洞有些得了及时修复…

DevEco Studio编译时候自动生成js、js.map文件导致项目无法运行

这算是开发工具的bug吧&#xff0c;估计后期能修复。 解决办法&#xff0c;手动删除.js、.js.map文件即可&#xff1b; 文件太多&#xff0c;删除很麻烦&#xff0c;有个大佬写了个插件&#xff0c;可一键删除&#xff1a;ArkCompilerSupport DevEco Studio 运行项目有时会自动…

二叉树进阶leetcode

606. 根据二叉树创建字符串 要点&#xff1a;前序遍历&#xff0c;当左子树为空时&#xff0c;右结点有数字时要给左边加括号 class Solution { public:string tree2str(TreeNode* root) {string s;//创建一个字符串if(rootnullptr){return s;}sto_string(root->val);//保存…

网络、网络协议模型、UDP编程——计算机网络——day01

今天来到了网络编程&#xff0c;主要讲了网络、网络协议模型以及UDP编程 网络 网络主要是进行&#xff1a;数据传输和数据共享 网络协议模型 OSI协议模型应用层 实际发送的数据表示层 发送的数据是否加密会话层 是否建立会话连接传…

调研图基础模型(Graph Foundation Models)

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 图基础模型&#xff08;Graph Foundation Models&#xff0c;简称 GFMs&#xff09; 是一种经过预训练的图大模型&#xff0c;旨在处理不同领域的图数据和任务。让我们详细探讨一下这个概念。 Github …

uniapp让输入框保持聚焦状态,不会失去焦点

使用场景&#xff1a;当输入框还有发送按钮的时候&#xff0c;点击发送希望软键盘不消失&#xff0c;还可以继续输入&#xff0c;或者避免因输入图片标签造成的屏闪问题 多次尝试后发现一个很实用的方法&#xff0c;适用input输入框和editor输入框 解决办法&#xff1a;把cli…

AXI4总线解析

一、读地址 AWVALID和AWREADY同时为高时&#xff0c;在这个上升沿&#xff0c;图中黄线&#xff0c;将接下来的数据写入地址40000000中。 在

基于状态机的按键消抖实现

摸鱼记录 Day_14 !(^O^)y review 在day_13中以按键状态判断为例学习了状态分析基于状态机的按键消抖原理-CSDN博客 分析得到了下图&#xff1a; 今日任务&#xff1a;完成此过程 !(^O^)y 小梅哥对应视频&#xff1a; 15B 基于状态机的按键消抖Verilog实现_哔哩哔哩…

DataFunSummit 2023:洞察现代数据栈技术的创新与发展(附大会核心PPT下载)

随着数字化浪潮的推进&#xff0c;数据已成为企业竞争的核心要素。为了应对日益增长的数据挑战&#xff0c;现代数据栈技术日益受到业界的关注。DataFunSummit 2023年现代数据栈技术峰会正是在这样的背景下应运而生&#xff0c;汇聚了全球数据领域的精英&#xff0c;共同探讨现…

Linux 文件操作命令

1 文件与目录操作 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录cd ../.. 返回上两级目录cd - 返回上次所在目录cp file1 file2 将file1复制为file2cp -a dir1 dir2 复制一个目录 cp -a /tmp/dir1 . 复制一个…

【Qt】初识Qt

文章目录 一. 行业岗位介绍二. 什么是客户端&#xff1f;三. GUI 开发的各自技术方案四. 什么是框架&#xff1f;五. Qt 的发展史五. Qt 支持的系统六. Qt 的优点 一. 行业岗位介绍 二. 什么是客户端&#xff1f; 既然 Qt 是用来进行客户端开发的&#xff0c;那我们就要了解什…

如何保证ES和数据库的数据一致性?

在业务中&#xff0c;我们通常需要把数据库中的数据变更同步到ES中&#xff0c;那么如何保证数据库和ES的一致性呢&#xff1f;通常有以下几种做法&#xff1a; 双写 在代码中&#xff0c;对数据库和ES进行双写&#xff0c;并且先操作本地数据库&#xff0c;后操作ES&#xff…

Ubuntu20.04安装并配置vscode

Ubuntu20.04安装并配置vscode vscode安装miniconda安装创建虚拟python3.8环境pytorch和匹配的cuda安装 vscode安装 VSCode可以通过 Snapcraft 商店或者微软源仓库中的一个 deb 软件包来安装。 我们这里选用安装VSCode snap版&#xff0c;打开你的终端(CtrlAltT)并且运行下面的…

px2rem实现vue项目响应式布局

第一步 首先需要在项目中安装px2rem插件 npm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹&#xff0c;在util文件夹下新建rem.js文件&#xff0c;内容如下&#xff1a; // rem等比适配配置文件 // 基准大小 const baseSize 14 //…

【机器学习300问】27、什么是决策树?

〇、两个预测任务 &#xff08;1&#xff09;任务一&#xff1a;银行预测偿还能力 当前&#xff0c;某银行正致力于发掘潜在的放贷用户。他们掌握了每位用户的三个关键特征&#xff1a;房产状况、婚姻状况以及年收入。此外&#xff0c;银行还拥有过往这些用户的债务偿还能力的…