Magicode logo
Magicode
4

【Flutter】非同期処理と並列処理でUI描画に与える影響を比較してみた

4 min read

はじめに

Flutterを利用する上でよく話題に上がる「画面がカクつく」問題。

今回は「並列処理を使うことで解決するかも?」の紹介をします。

ざっくり結論を言うと

  • Flutterの言語であるDartはUI描画・計算含め基本的に全てシングルスレッドで動作するよ
  • 重い処理をしてしまうとUI描画に影響が出てカクつきが生じるよ
  • 非同期処理は同じスレッドで動きカクつきの解消はできないよ
  • 並列処理は処理を別スレッドにでき、カクつきの解消になる可能性があるよ

非同期処理と並列処理の比較方法

非同期処理と並列処理の比較のため、円形のプログレスインジケーターを利用します。

  1. 処理を開始
  2. 円形のプログレスインジケーターを表示
  3. 処理が完了したら結果を表示

を行い、非同期処理と並列処理のそれぞれで2.がどのように見えるか確認します。

元になるコード

下記コードの関数Aに非同期関数や並列処理関数を設定して進めます。 設定する関数は下部の方に書いてあります。

軽い非同期処理の検証

非同期処理は関数Aが軽い処理である場合、有効な手段です。実際に検証しましょう。

関数AにdelayTime(3)をセットします。3秒だけ待ち結果を返す軽い処理です。 問題なく円形プログレスインジケーターが表示されてますね。

重い非同期処理

続いて重い非同期処理の場合に円形プログレスインジケーターがどうなるか検証します。

関数AにasyncFibonacci(35)をセットします。フィボナッチ数列の説明は省略しますが、計算に時間がかかる処理です。円形プログレスインジケーターは表示されず、結果が表示されています。これはasyncFibonacci(35)がスレッドを占有し、円形プログレスインジケーターが表示を妨げていることが原因です。

並列処理の検証

それでは並列処理を検証していきます。Flutterにはcompute(関数, 引数)とすることで並列処理が簡単に利用できます。関数Aにcompute(paraFibonacci, 42)をセットします。

※フィボナッチ数列は渡す数字が大きいほど時間がかかる処理で、並列処理の場合35だと目視ができないレベルだったので42としました。詳しくは手元で数字を変えて試してみてください。

非同期処理と異なり円形プログレスインジケーターが表示されてますね。これは別スレッドでcompute(paraFibonacci, 42)を実施することで、円形プログレスインジケーターの描画に影響を与えずに処理ができているためです。

結論

  • 並列処理(compute)を用いればUI描画への影響を避けつつ重い処理ができる
  • 軽い処理であれば非同期処理でも問題ない
  • 画面のカクつきが気になる時は並列処理(compute)を試すのがおすすめ

Discussion

コメントにはログインが必要です。