Flutter が非常に強力なモバイル アプリケーション開発フレームワークであることは否定できませんが、技術アーキテクチャを選択する際に Flutter を選択しましたが、特にクロスターミナル機能は非常に優れていますが、複雑なアプリケーションの実装では、パフォーマンスが低下することが徐々にわかってきました。アプリは影響を受けます。何らかの影響を受けます。
実はこの問題は社内でも発見していましたが、優先順位を考慮して、パフォーマンスの最適化の必要性はイテレーションに含まれていませんでしたが、製品の運用ではユーザーエクスペリエンスに関するユーザーのフィードバックが次々と寄せられたため、これを含めました。前提として、要件のレビューと技術的な議論の後に、いくつかの実現パスの結論が得られ、ここで共有し、コミュニケーションする機会も得ます。
Flutterのレンダリングプロセス
Flutter アプリケーションのパフォーマンスを最適化する前に、そのレンダリング プロセスを理解する必要があります。これはパフォーマンスの最適化に不可欠です。
Flutter のレンダリング プロセスは、主に構築、レイアウト、描画の 3 つの段階に分かれています。
- ビルドフェーズ中に、Flutter はウィジェットを作成して構成します。
- レイアウト段階では、Flutter が各ウィジェットの位置とサイズを決定します。
- 描画フェーズ中に、Flutter はウィジェットを画面に描画します。
1. 使用するウィジェットの数を制限する
Flutter では、ウィジェットを作成しすぎると大量の CPU リソースが消費され、アプリケーションのパフォーマンスに影響します。したがって、構築するウィジェットの数を最小限に抑える必要があります。たとえば、ListView を使用する代わりに、ListView.builder を使用してリストを構築できます。ListView.builder は画面に表示されるウィジェットのみを構築するのに対し、ListView はすべてのウィジェットを構築するためです。
2. 不必要な再描画を避ける
Flutter では、ウィジェットの状態が変化すると、ウィジェットとそのすべての子ウィジェットが再描画されます。したがって、不必要な再描画を避けるように努める必要があります。たとえば、const を使用して定数ウィジェットを作成し、ウィジェットが再描画されないようにすることができます。さらに、RepaintBoundary を使用して再描画が必要なウィジェットを分離することもできるため、不必要な再描画を減らすことができます。
Flutterのデータ処理構造
大量のデータを扱う場合、正しいデータ構造とアルゴリズムを使用することが非常に重要です。
1. リンクリスト（LinkedList）を上手に活用する
リスト内の要素を検索する必要がある場合は、リスト (List) を使用するよりもハッシュ セット (HashSet) を使用する方が効率的です。ハッシュ セット内の要素を見つける時間計算量は O(1) であるのに対し、リスト内の要素を見つける時間計算量は O(n) であるためです。同様に、リスト内の要素を頻繁に追加または削除する必要がある場合は、配列 (Array) を使用するよりもリンク リスト (LinkedList) を使用する方が効率的です。
2. 遅延読み込みを使用する
大量のデータを扱う場合、遅延読み込みを使用してアプリケーションのパフォーマンスを向上させることができます。遅延ロードは、必要な場合にのみデータをロードする手法です。たとえば、FutureBuilder または StreamBuilder を使用して遅延読み込みを実装すると、一度にすべてのデータを読み込むことがなくなり、メモリ使用量が削減されます。
パフォーマンス分析ツールを使用する
Flutter は実際に、Flutter DevTools や DartDevTools などのパフォーマンス分析ツールをいくつか提供しています。
これらのツールをうまく活用すれば、パフォーマンスのボトルネックを見つけて、的を絞った最適化を行うことができます。
たとえば、Flutter DevTools のタイムライン ビューを使用して、アプリケーションのフレーム レート、各フレームの構築、レイアウト、描画時間を確認できます。Dart DevTools の CPU Profiler を使用して、CPU 使用率と各関数の実行時間を確認することもできます。
さらに、技術的な議論の中で、画像キャッシュ、JSON シリアル化、逆シリアル化、拡張ツールも実装できることも発見しました。
Flutter では、キャッシュを使用してアプリケーションのパフォーマンスを向上させることができます。たとえば、イメージ キャッシュ (ImageCache) を使用してイメージをキャッシュすることで、毎回ネットワークからイメージをダウンロードする必要がなくなります。さらに、メモ化テクノロジーを使用して関数の結果をキャッシュし、計算の繰り返しを避けることもできます。
JSON のシリアル化や逆シリアル化などの一部の操作は、Dart のコア ライブラリを使用して直接実行すると、アプリケーションのパフォーマンスに影響を与える可能性があります。したがって、json_serializable やbuilt_value などの特殊なライブラリを使用して、これらの操作を実行できます。
H5 の観点から最適化を検討する場合、Flutter で開発したアプリケーションで過去に開発したアプレットを直接実行できるように、H5 ではなくアプレットを使用することを強くお勧めします。同じ機能のビジネスでは、アプレットの開発は 1 つだけで済みます。 WeChat側の他のアプリでも動作し、デュアルスレッド技術によりH5よりも効果が大幅に向上し、白画面やフリーズの状況が大幅に減少しました。原理は実際には非常に単純で、 FinClipは Flutter アプリケーションと統合するための小さなプログラム SDK を提供し、アプリが小さなプログラム ビジネス コードを実行できるホスト環境を備えています。
一般に、Flutter のパフォーマンスの最適化は継続的なプロセスであり、継続的な学習と練習が必要です。最適化の目標は、アプリケーションの実行速度を向上させるだけでなく、アプリケーションの応答速度を向上させ、アプリケーションのメモリ使用量を削減し、アプリケーションのエネルギー効率を向上させることです。これらの実践的なヒントとベスト プラクティスについての徹底的な調査が、Flutter を使用してアプリを構築する際のパフォーマンスの向上に役立つことを願っています。