Flutter performance optimization - 版本历史

2023年12月18日 (一) 15:42 Riguz

2023-12-18T15:42:39Z

←上一版本		2023年12月18日 (一) 15:42的版本
第1行：		第1行：
			{{DISPLAYTITLE:Flutter性能优化实践}}

	我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。		我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。

Riguz：Riguz移动页面Flutter性能优化实践至Flutter performance optimization，不留重定向

2023-12-18T15:41:25Z

Riguz移动页面Flutter性能优化实践至Flutter performance optimization，不留重定向

←上一版本	2023年12月18日 (一) 15:41的版本
（没有差异）

Riguz：Riguz移动页面Blog:Flutter性能优化实践至Flutter性能优化实践，不留重定向

2023-12-18T15:23:45Z

Riguz移动页面Blog:Flutter性能优化实践至Flutter性能优化实践，不留重定向

←上一版本	2023年12月18日 (一) 15:23的版本
（没有差异）

2023年12月18日 (一) 15:23 Riguz

2023-12-18T15:23:26Z

←上一版本		2023年12月18日 (一) 15:23的版本
第1行：		第1行：
	我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。		我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。

	[[File:login_blocked_overlay.gif\|~~600px~~\|Performance overlay]]		[[File:login_blocked_overlay.gif\|200px\|Performance overlay]]

	= 背景=		= 背景=
	先还是大致介绍一下我的场景。如图所示：		先还是大致介绍一下我的场景。如图所示：

	[[File:login_blocked.gif\|~~600px~~\|Blocked Login UI]]		[[File:login_blocked.gif\|200px\|Blocked Login UI]]

	点击完成之后，期待的情况应该是显示圈圈转动的，但很明显这个地方卡住了。代码实现是是采用的mobx作状态管理，然后使用插件调用的argon2的原生c代码。页面的部分如下：		点击完成之后，期待的情况应该是显示圈圈转动的，但很明显这个地方卡住了。代码实现是是采用的mobx作状态管理，然后使用插件调用的argon2的原生c代码。页面的部分如下：

Riguz：/* 使用flutter profile工具 */

2023-12-18T15:23:04Z

使用flutter profile工具

←上一版本		2023年12月18日 (一) 15:23的版本
第49行：		第49行：
	所以首先想搞清楚的是，到底是什么操作导致了卡顿呢？这时候想到flutter可能有性能分析的工具，能不能帮助定位到具体的代码行呢？于是在Profile模式下运行程序，这是相关的信息：		所以首先想搞清楚的是，到底是什么操作导致了卡顿呢？这时候想到flutter可能有性能分析的工具，能不能帮助定位到具体的代码行呢？于是在Profile模式下运行程序，这是相关的信息：

	[[File:login_blocked_overlay.gif\|~~600px~~\|Performance overlay]]		[[File:login_blocked_overlay.gif\|200px\|Performance overlay]]

	然后还有dev tools中的对应信息：		然后还有dev tools中的对应信息：

Riguz：/* Flutter线程模型 */

2023-12-18T15:22:50Z

Flutter线程模型

←上一版本		2023年12月18日 (一) 15:22的版本
第79行：		第79行：
	原来dart跟JavaScript一样是一个单线程的模型，也就是是说，async/await里面的方法并不是在多个线程中取执行的，而是通过事件机制，在单线程中完成的。那么就很容易解释UI卡顿的场景了，UI更新和事件代码是交替执行的，如果其中事件执行的部分花费了较长时间，UI就没办法去更新，所以界面就会卡在那里，也就是日志里面所说的`Skipped 107 frames! The application may be doing too much work on its main thread.`了。		原来dart跟JavaScript一样是一个单线程的模型，也就是是说，async/await里面的方法并不是在多个线程中取执行的，而是通过事件机制，在单线程中完成的。那么就很容易解释UI卡顿的场景了，UI更新和事件代码是交替执行的，如果其中事件执行的部分花费了较长时间，UI就没办法去更新，所以界面就会卡在那里，也就是日志里面所说的`Skipped 107 frames! The application may be doing too much work on its main thread.`了。

	[[File:Dart-eventmodel.png\|~~600px~~\|Dart event model]]		[[File:Dart-eventmodel.png\|400px\|Dart event model]]

	从dart的文档中可以了解到，dart内部有两个队列：		从dart的文档中可以了解到，dart内部有两个队列：

Riguz：/* Isolate中通信 */

2023-12-18T15:22:37Z

Isolate中通信

←上一版本		2023年12月18日 (一) 15:22的版本
第215行：		第215行：
	这样最终的效果就是:		这样最终的效果就是:

	[[File:login_unblocked.gif\|~~600px~~\|Login unblocked]]		[[File:login_unblocked.gif\|200px\|Login unblocked]]

	* [https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6a Dart asynchronous programming: Isolates and event loops]		* [https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6a Dart asynchronous programming: Isolates and event loops]
第227行：		第227行：
	* [https://book.flutterchina.club/chapter2/thread_model_and_error_report.html Dart单线程模型]		* [https://book.flutterchina.club/chapter2/thread_model_and_error_report.html Dart单线程模型]

	[[Category:~~Pinned~~]]		[[Category:Flutter]]

Riguz：/* Flutter线程模型 */

2023-12-18T15:21:46Z

Flutter线程模型

←上一版本		2023年12月18日 (一) 15:21的版本
第82行：		第82行：

	从dart的文档中可以了解到，dart内部有两个队列：		从dart的文档中可以了解到，dart内部有两个队列：


	* event queue：包含所有的外部事件例如IO、点击、绘制等		* event queue：包含所有的外部事件例如IO、点击、绘制等

Riguz：/* Flutter线程模型 */

2023-12-18T15:21:22Z

Flutter线程模型

←上一版本		2023年12月18日 (一) 15:21的版本
第79行：		第79行：
	原来dart跟JavaScript一样是一个单线程的模型，也就是是说，async/await里面的方法并不是在多个线程中取执行的，而是通过事件机制，在单线程中完成的。那么就很容易解释UI卡顿的场景了，UI更新和事件代码是交替执行的，如果其中事件执行的部分花费了较长时间，UI就没办法去更新，所以界面就会卡在那里，也就是日志里面所说的`Skipped 107 frames! The application may be doing too much work on its main thread.`了。		原来dart跟JavaScript一样是一个单线程的模型，也就是是说，async/await里面的方法并不是在多个线程中取执行的，而是通过事件机制，在单线程中完成的。那么就很容易解释UI卡顿的场景了，UI更新和事件代码是交替执行的，如果其中事件执行的部分花费了较长时间，UI就没办法去更新，所以界面就会卡在那里，也就是日志里面所说的`Skipped 107 frames! The application may be doing too much work on its main thread.`了。

	[[File:~~https://cdn.jsdelivr.net/gh/flutterchina/flutter~~-~~in-action/docs/imgs/2-12~~.png\|600px\|Dart event model]]		[[File:Dart-eventmodel.png\|600px\|Dart event model]]

	从dart的文档中可以了解到，dart内部有两个队列：		从dart的文档中可以了解到，dart内部有两个队列：

2021年7月5日 (一) 04:39 Riguz

2021-07-05T04:39:46Z

←上一版本		2021年7月5日 (一) 04:39的版本
第1行：		第1行：
	我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。		我的加密软件有一个登录页面，需要用户输入主密码然后验证密码之后才能进入。因为密码转换(Key transform)过程中用到了Argon2算法，而这个算法没有原生的dart实现，所以必须要通过插件的形式来完成，为此我还专门做了一个插件[https://pub.dev/packages/encryptions encryptions]。调用插件得到秘钥这个过程大概要花个1~4秒钟，最近在安卓真机上测试发现，这个过程中我的进度条竟然出现了卡顿，也就是说本来应该转圈圈的，结果一开始就卡住不动了，那我还需要这个加载动画干嘛呢？为此研究了一番，如何来解决这个问题。

			[[File:login_blocked_overlay.gif\|600px\|Performance overlay]]

	= 背景=		= 背景=
第223行：		第225行：
	* [https://github.com/flutter/flutter/issues/34993 Plugins crash with "Methods marked with \@UiThread must be executed on the main thread."]		* [https://github.com/flutter/flutter/issues/34993 Plugins crash with "Methods marked with \@UiThread must be executed on the main thread."]
	* [https://book.flutterchina.club/chapter2/thread_model_and_error_report.html Dart单线程模型]		* [https://book.flutterchina.club/chapter2/thread_model_and_error_report.html Dart单线程模型]

			[[Category:Pinned]]

Flutter performance optimization - 版本历史

2023年12月18日 (一) 15:42 Riguz

Riguz：​Riguz移动页面Flutter性能优化实践至Flutter performance optimization，不留重定向

Riguz：​Riguz移动页面Blog:Flutter性能优化实践至Flutter性能优化实践，不留重定向

2023年12月18日 (一) 15:23 Riguz

Riguz：​/* 使用flutter profile工具 */

Riguz：​/* Flutter线程模型 */

Riguz：​/* Isolate中通信 */

Riguz：​/* Flutter线程模型 */

Riguz：​/* Flutter线程模型 */

2021年7月5日 (一) 04:39 Riguz

Riguz：Riguz移动页面Flutter性能优化实践至Flutter performance optimization，不留重定向

Riguz：Riguz移动页面Blog:Flutter性能优化实践至Flutter性能优化实践，不留重定向

Riguz：/* 使用flutter profile工具 */

Riguz：/* Flutter线程模型 */

Riguz：/* Isolate中通信 */

Riguz：/* Flutter线程模型 */

Riguz：/* Flutter线程模型 */