カクつきを防ぐ高負荷処理
メイン isolate の応答性を保ちます
「カクつきを防ぐ高負荷処理」はCoddyKit上の無料Dart Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはDart Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Dart Academyコースには全4レッスンが含まれています。
Jankとは
Jankとは、UIがフレームを描画し損ねたときに発生する、目に見えるカクつきです。重い処理がメインisolateを長時間占有すると起こります。😬
フレームの予算
60fpsでは、1フレームに使える時間は約16 millisecondsです。メインisolateでこの時間を超えると、画面が一時的に固まります。
原因を見つける
CPU-heavyな処理に注意してください。大きなJSONの解析、画像フィルター、暗号化、大規模なソートなどは、典型的なJankの原因です。
解決策
その重い処理をanother isolateに移します。ワーカーが並列で処理している間も、メインisolateはフレームを描画し続けられます。
Flutterのcompute
Flutterでは、computeヘルパーがisolateを代わりに用意してくれます。関数と引数を渡し、結果をawaitしてください。
final parsed = await compute(parseJson, rawText);computeとIsolate.runの違い
computeは関数と引数を1つずつ受け取り、Isolate.runはクロージャを受け取ります。どちらも1つの処理を別スレッドで実行し、Futureを返します。
ペイロードを小さく保つ
isolate間でデータをコピーすると時間がかかります。処理にneedsなものだけを送り、実際に使う必要最小限の結果だけを返してください。
頻繁な通信ではなくまとめて送る
isolateの境界を越える処理は無料ではありません。小さなメッセージを何度も往復させるより、1回のbatchedな受け渡しを優先してください。
繰り返しには再利用する
同じ処理を頻繁に実行するなら、そのたびに新しいisolateを起動するより、長時間動作するspawn済みisolateのほうが適しています。Reuseして起動時のオーバーヘッドを省きましょう。
まず計測する
推測で判断しないでください。DevToolsでプロファイリングし、isolateに移す前に、実際にフレームを落としている処理を特定します。
I/Oはasyncのままにする
ネットワークやディスクの待機はCPU処理ではないため、通常のasyncだけで滑らかに処理できます。isolateは本当の計算処理のために使いましょう。
クイックチェック
どの処理を専用のisolateに分けるのが最も効果的ですか？
まとめ
jankを防ぐには、まずプロファイリングを行い、その後computeまたはIsolate.runでCPU負荷の高い処理をisolateに移します。ペイロードを小さく保ち、UIを滑らかにしましょう。✅
AI チューターと学ぶ Dart — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「カクつきを防ぐ高負荷処理」レッスンは無料ですか？
はい。「カクつきを防ぐ高負荷処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Dart Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Dart Academyコースには全4レッスンが含まれています。
「カクつきを防ぐ高負荷処理」で何を学びますか？
メイン isolate の応答性を保ちます ブラウザで直接実行するハンズオンコードでDart Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Dart Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのDart Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「カクつきを防ぐ高負荷処理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このDart Academyレッスンでコードを書いて実行できますか？
はい。すべてのDart Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。