Flutter 性能优化技术与最佳实践

已发表: 2023-04-11

Flutter 是一个强大的跨平台框架，用于使用单个代码库构建具有视觉吸引力和本地编译的应用程序。使用此框架，您可以为 Web、移动和桌面创建解决方案。 Flutter 为 iOS 和 Android 设备上的应用程序提供了类似原生的外观和感觉。 Flutter 具有许多其他优势，例如灵活性和应用程序开发速度。它深受全球软件开发团队的喜爱。

然而，要从这个惊人的框架中获得最佳结果，您必须在开发过程中注意 Flutter 应用程序的性能调优。优化不佳的 Flutter 应用程序可能会变慢且无响应，消耗更多电量，并且在开发过程中需要更多时间和资源。这将对用户体验和应用商店评级以及应用所有者的预算产生不利影响。但通过实施正确的性能技术和策略，您可以开发出高性能的 Flutter 应用程序，提供流畅的用户体验。这篇文章讨论了 Flutter 性能优化应遵循的最佳实践。

Flutter 性能优化最佳实践

使用小部件而不是函数

使用 Widgets 而不是函数是优化 Flutter 应用程序性能的关键技术。函数定义应用程序的行为并操作数据，而小部件是应用程序用户与之交互的 UI 构建块。如果您使用小部件而不是功能，您的 Flutter 移动应用程序将具有交互式且视觉上吸引人的 UI。

以下是一些示例，说明如何在 Flutter 应用程序中使用 Widgets 而不是 Functions。

自定义小部件创建

开发人员通常会定义一个函数来生成一段 UI。但是，有一种更好的生成 UI 的技术：构建一个封装用户界面及其行为的自定义小部件。此方法将允许您在应用程序的各个部分重用小部件，并且您的代码将变得更加模块化和可维护。

内置小部件的使用

如果您不想创建自定义小部件，您可以从 Flutter 框架提供的大量内置小部件中进行选择。如果您使用这些内置小部件，则无需编写自定义代码即可开发复杂的界面。例如，TextField 小部件可帮助您创建文本输入字段，而 ListView 小部件可让您显示可滚动的项目列表。

组合多个小部件

要创建更复杂的用户界面，建议组合多个小部件。例如，您可以使用行或列小部件水平或垂直堆叠或对齐多个小部件。

将大型小部件分解为子小部件

尽可能使用无状态小部件是一种很好的做法。在状态更改期间，Flutter 会重新绘制有状态的小部件。这意味着开发人员必须重建整个小部件。而且，如果构建树的大小很大，您将需要多种资源来重建它。要解决此问题，请保持您的小部件模块化和小型化以最小化构建函数的大小。简而言之，将大型部件分解为更小的子部件。

通过使用小部件而不是功能，您的应用程序 UI 将更加灵活和可重用。但是，函数是操作数据和定义应用程序行为所必需的。因此，最有经验的 Flutter 应用程序开发人员遵循的最佳实践是将函数与小部件一起使用。

优化布局并使用“const”关键字

Flutter 应用程序布局的复杂性是影响应用程序性能的关键因素之一。避免使用嵌套布局；仅在必要时使用它们。您还应该尝试使您的小部件树尽可能浅。

使用“const”关键字是优化 Flutter 应用程序性能的一种流行做法。在创建自定义小部件或使用内置的 Flutter 小部件时，请尽可能使用“const”关键字。这种做法将使您的小部件不可变。它将最大限度地减少重建小部件的需求，从而提高性能。原因如下——如果您使用“const”，Flutter 开发环境将只重建需要更新的小部件。当 setState 调用发生时，小部件不会发生变化，并且不会发生小部件重建。另一个推荐的做法是节省 CPU 周期并将它们与“const”构造函数一起使用。

使用异步编程技术

在Flutter应用开发过程中，您必须检查代码是同步运行还是异步运行。使用异步编程技术，您可以避免阻塞主线程，这将保持 Flutter 应用程序的响应能力。但是，异步编写 Flutter 应用程序具有挑战性；升级和调试等任务变得难以执行。要解决此问题，请使用“Futures”和“async/await”等异步编程技术。例如，使用'async/await'，Flutter 开发者可以用同步风格编写异步代码，这可以增加代码的可读性和可维护性。

看看如何在 Flutter 中使用“async/await”。

步骤1

使用 'async' 关键字，在函数定义之前定义一个异步函数。

未来的 fetchData() 异步 {

// ...

}

第2步

在异步函数中使用 await 关键字来等待异步操作的结果。

未来的 fetchData() 异步 {

最终响应 = await http.get('https://example.com/data');

// ...

}

在这里，函数 http.get() 返回一个 Future。这表示可能需要一些时间才能完成的异步操作。关键字 await 使程序能够在继续之前等待此操作的结果。

步骤 3

调用异步函数时，使用 await 关键字等待函数完成。

等待获取数据（）；

关键字 await 将使程序能够在继续执行下一行代码之前等待函数 fetchData() 完成。

在 16 毫秒内构建和渲染帧

在 16 毫秒内在您的应用程序中创建和渲染帧是另一种常见的 Flutter 应用程序性能优化技术。创建和渲染任务需要两个独立的线程。对于这些任务中的每一个，你有 16 毫秒。但是，为了避免延迟并提高应用程序的性能，您需要将这 16 毫秒降低到 8 毫秒。这意味着在 8 毫秒内开发帧并在 8 毫秒内渲染它，以便总时间不超过 16 毫秒。

总而言之，在 60 Hz 显示器中在 16 毫秒内创建和渲染帧。您可能想知道缩短时间是否会影响显示质量。答案是不。将帧开发和渲染的总时间降低到 16 毫秒不会导致任何可见性差异。相反，它将提高设备的电池寿命并防止热问题。这种方法还将大大加快应用程序在较小尺寸设备上的性能。您的 Flutter 应用程序的动画非常流畅，您的用户将体验到令人愉悦的用户体验。

限制不透明度的使用

将 Opacity 小部件和 Clipping 的使用减少到最低限度。当您使用 Opacity 时，它会导致小部件在每一帧后自行重建。这可能会影响 Flutter 应用程序的性能，如果有动画则更是如此。为避免这种情况，您可以直接将不透明度应用于图像，而不是使用不透明度小部件。这将提高任务的速度并减少资源使用。

不透明度小部件允许您通过将另一个小部件包裹在其中来隐藏屏幕上的另一个小部件。许多人使用不透明度小部件来隐藏特定的小部件。隐藏小部件的做法在 Objective-C 等编程语言中很常见。但在 Flutter 中，将小部件在屏幕上隐藏时间过长的方法可能会变得代价高昂。这种方法有一种更具成本效益的替代方法。您可以使用一种无需文本小部件即可重建小部件的方法来重建小部件而不是隐藏它。而且，如果您希望在屏幕上显示该小部件，您可以使用 Visibility 小部件而不是 Opacity。它不涉及任何分数不透明度值。可见性有两种状态：可见和不可见。

减小应用程序大小

在应用程序开发过程中，开发团队通常最终会使用多个包、代码、小部件和脚本。但是，存储如此大量的数据可能会消耗大量内存，因此不利于应用程序的性能。

这个问题可以通过使用名为 Gradle 的工具来解决。此工具可帮助您减小应用程序的大小。为此，您还可以使用 Google 引入的打包系统。此打包系统允许您构建 Android 应用程序包。使用应用程序包，您可以从 Google Play 商店下载原始代码。在这里，您会找到与平台架构和设备兼容的应用程序。

最小化网络请求

网络请求的数量会影响 Flutter 应用程序的性能。尽量减少网络请求。您可以使用 StreamBuilder 或 FutureBuilder 等缓存机制来避免重复的网络请求。

使用有效的数据结构

当您需要在 Flutter 应用程序中处理大量数据时，请避免使用庞大的数据结构，例如地图或列表。相反，请考虑使用高效的数据结构，例如 LinkedHashMap 或 Set。这些数据结构在性能和内存使用方面表现得更好。

优化图像

图像可能会成为性能问题的根源，特别是当它们非常大并且没有适当优化时。这就是为什么您应该压缩图像并适当调整它们的大小。为此，您可以使用“flutter_svg”等工具。此工具可帮助您渲染图形而不是光栅化图像。

使用 Flutter 性能工具

Flutter 自带多种性能优化工具。这些工具使 Flutter 应用程序开发人员能够检查和提升 Flutter 应用程序的性能。例如，Flutter DevTools 允许您根据 CPU 利用率、内存使用率和帧速率等指标分析和可视化应用程序的性能。

执行应用程序分析

Flutter 性能测试至关重要。定期分析您的 Flutter 应用程序，以识别 Dart 代码中的性能问题。此类问题的一些示例是输入/输出、带宽和缺乏卡顿。尽早解决问题。诸如 Flutter Observatory 之类的工具将帮助您识别成本高昂的操作并对其进行优化。

结束语

优化 Flutter 应用程序的性能非常重要。优化的 Flutter 应用程序可确保设备兼容性、提供出色的用户体验、延长电池寿命、最大限度地降低应用程序开发成本并提高应用程序商店排名。前面提到的 Flutter 性能优化技术是全球无数开发人员信赖的最著名实践。因此，请与专业且经验丰富的 Flutter 应用程序开发公司合作。一家精通的公司将按照最佳实践和智能策略执行您的项目，为您提供高性能的 Flutter 最终产品。