ウィジェット表示の最適化

ウィジェット表示の最適化は、ユーザーがモジュール内を移動する際に、個々のウィジェットをマウントおよびアンマウントするタイミングを制御する Workshop の設定です。デフォルトでは、ウィジェットを含むレイアウトが表示されるとウィジェットがマウントされ、たとえばユーザーがタブを切り替えて、そのレイアウトが表示されなくなるとアンマウントされます。これにより、ウィジェットが表示されていないときにブラウザーのリソースが解放されますが、ユーザーがウィジェットに戻るたびに、データを再読み込みして状態を再構築する必要があります。

表示動作を調整するタイミング

各設定のデフォルト値は、ほとんどのモジュールに適するよう調整されています。次のいずれか、または同様の状況に該当しない限り、デフォルト値をそのまま使用してください。

タブを切り替えてもカスタムウィジェットを保持する

設定：通常のマウント + アンマウントしない

カスタムウィジェットがアクティブでないタブにある場合、通常は完全にリセットされます。アンマウントしないを使用すると、ウィジェットはバックグラウンドで読み込まれた状態を保持します。ユーザーがタブに戻ると、すべてのデータと状態がそのまま保持されたウィジェットをすぐに利用できます。

非表示のオーバーレイまたはタブ内のウィジェットを事前に読み込む

設定：即時マウント + アンマウントしない

オーバーレイやタブがまだ表示されていなくても、モジュールが開くとすぐにウィジェットの読み込みが始まります。ユーザーがオーバーレイを開くかタブに切り替えると、コンテンツはすでに読み込まれており、すぐに利用できます。これは、ユーザーがほぼ必ず移動する先のページにあるウィジェットで、最初の移動時の待ち時間が操作の妨げになる場合に役立ちます。一方で、モジュールの初期読み込み時間は長くなります。

スクロール位置とフォームの状態を保持する

設定：通常のマウント + アンマウントしない

アンマウントしないように設定されたウィジェットは、スクロール位置やユーザー入力を含む内部状態を保持します。これは、ユーザーが頻繁に開閉するドロワーやタブ内のウィジェットに役立ちます。

スクロールの長いページを最適化する

設定：画面に表示されるまで遅延 + 通常のアンマウント

画面の表示範囲より下にあるウィジェットは、ユーザーがその位置までスクロールするまで読み込みを開始しません。これにより、特にウィジェットが多いページで、モジュールの初期読み込み時間が短縮されます。

スクロールの長いページを仮想化する

設定：画面に表示されるまで遅延 + 画面外でアンマウント

ウィジェットはスクロールによって表示範囲に入ると初期化され、表示範囲から外れるとリセットされます。これにより、表示されているウィジェットのみがアクティブになり、多数のウィジェットを含むページのパフォーマンスを大幅に改善できます。

設定オプション

表示の最適化は、ウィジェットのマウント動作とアンマウント動作という2つの独立した設定で制御されます。

マウント動作

マウント動作は、ウィジェットが初期化され、データの読み込みを開始するタイミングを制御します。

• 通常：（デフォルト）ウィジェットを含むレイアウトが表示されると、ウィジェットが初期化されます。これが標準の動作です。
• 画面に表示されるまで遅延： ウィジェットは、スクロールによってユーザーのビューポートに入るまで初期化されません。画面の表示範囲より下にあるウィジェットは、ユーザーがその位置まで下にスクロールするまで読み込まれません。
• 即時マウント： ウィジェットがタブの背後や閉じたオーバーレイ内に隠れている場合、またはその他の理由で表示されていない場合でも、モジュールが読み込まれるとすぐに初期化されます。

アンマウント動作

アンマウント動作は、ウィジェットがリセットされ、状態がクリアされるタイミングを制御します。

• 通常：（デフォルト）ウィジェットを含むレイアウトが表示されなくなると、ウィジェットがアンマウントされます。たとえば、ユーザーが別のタブやページに切り替えた場合です。
• 画面外でアンマウント： デフォルトの条件に加え、スクロールによって表示範囲から外れるたびにウィジェットがアンマウントされます。これは最も積極的にアンマウントを行う設定で、画面外にある間も負荷の高い計算を発生させるウィジェットに役立ちます。
• アンマウントしない： 一度マウントされると、ユーザーがモジュール内にいる限り、ウィジェットはマウントされたままになります。その後ウィジェットに戻るとすぐに表示され、ウィジェットの状態も保持されます。

マウント動作とアンマウント動作のすべての組み合わせが可能なわけではありません。通常のマウントでは、通常のアンマウントまたはアンマウントしないを使用できます。画面に表示されるまで遅延では、どのアンマウント動作も使用できます。即時マウントでは、アンマウントしないのみ使用できます。

ウィジェットの表示動作を設定する

特定のウィジェットの表示動作を設定するには、次の手順を実行します。

1. 編集モードで、キャンバス内のウィジェットを選択します。
2. ウィジェット設定パネルの表示タブを開き、表示の最適化オプションを見つけます。
3. 利用可能なモードから、希望するマウント動作とアンマウント動作を選択します。

設定パネルには、各モードの短い説明とアニメーションが表示され、選択したウィジェットやレイアウトの種類に適用できないオプションは無効になります。

パフォーマンスに関する考慮事項

デフォルトの表示動作は、多数のページやセクションに多数のウィジェットを含むモジュール向けに調整されており、ウィジェットをアンマウントすることでメモリー使用量と描画処理の負荷を抑えます。ウィジェットをマウントしたままにする設定を選択すると、次のようになります。

• ウィジェットの DOM、React の状態、およびメモリー内のデータはブラウザーに残り、モジュール内の変数が更新されると、ウィジェットが新しいデータを引き続きリクエストする場合があります。
• 即時マウントとアンマウントしないに設定されたウィジェットの初期化処理は、モジュールの初期読み込み時間に加算されます。この設定を広範囲に適用すると、初期読み込み時間が大幅に増加する可能性があります。
• 多数のウィジェットをマウントしたままにするモジュールは、スペックの低いデバイスでは、動作の遅延、メモリー不足、ブラウザータブのクラッシュが発生しやすくなります。

Performance Profiler を使用して、ウィジェット表示の最適化の変更がモジュールの読み込み時間と再読み込み時間に与える影響を測定します。

制限事項

• Carbon のタブ間の切り替えを含め、モジュールから移動すると、表示の最適化の設定にかかわらず、すべてのウィジェットがリセットされます。
• 埋め込みモジュール内のウィジェットが即時マウントを使用する場合、埋め込みモジュールウィジェットも即時マウントを使用する必要があります。
• ループレイアウトでは、表示の最適化は現在表示されているページにのみ適用され、ユーザーが別のページに移動するとウィジェットの状態がリセットされる場合があります。
• 非表示の状態でマウントされたウィジェットは、サイズが正確に測定されない場合があり、表示されたときに一時的にレイアウトが変化する可能性があります。
• 即時マウントまたはアンマウントしないを使用する場合、自動オブジェクト選択など、ウィジェットが最初に表示されたときや入力オブジェクトセットが変更されたときに実行されるウィジェットの動作は、ウィジェットがマウントされていても画面上では非表示の間に実行される場合があります。