ASP.NET Core Blazor パフォーマンスに関するベスト プラクティス

Blazor は、最も現実的なアプリケーション UI シナリオでハイ パフォーマンスを実現するために最適化されています。 しかし、最適なパフォーマンスが得られるかどうかは、開発者が適切なパターンと機能を採用するかどうかによります。

注

記事のこのノードのコード例では 、null 許容参照型 (NRT) と .NET コンパイラの null 状態静的分析が採用されています。これは、.NET 6 以降の ASP.NET Core でサポートされています。

Ahead-Of-Time (AOT) コンパイル

Ahead-of-time (AOT) コンパイルでは、Blazor アプリの .NET コードをネイティブ WebAssembly に直接コンパイルし、ブラウザーによる直接実行ができるようにします。 AOT でコンパイルされたアプリは、サイズの大きいアプリになり、ダウンロードに時間がかかります。しかし、一般に、AOT でコンパイルされたアプリは実行時のパフォーマンスが向上します。CPU を集中的に使用するタスクを実行するアプリの場合は、特にそうです。 詳細については、「ASP.NET Core Blazor WebAssembly ビルド ツールと Ahead-Of-Time (AOT) コンパイル」を参照してください。

メトリックとトレース

メトリックとトレース機能は、アプリのパフォーマンスの監視と診断、ユーザーの操作の追跡、運用環境でのコンポーネントの動作の理解に役立ちます。

コンフィギュレーション

アプリでメトリックとトレースBlazor有効にするには、サービスが登録されているアプリの ファイルで、次のメーターとアクティビティ ソースを使用して Program を構成します。

builder.Services.ConfigureOpenTelemetryMeterProvider(meterProvider =>
{
    meterProvider.AddMeter("Microsoft.AspNetCore.Components");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Lifecycle");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Server.Circuits");
});

builder.Services.ConfigureOpenTelemetryTracerProvider(tracerProvider =>
{
    tracerProvider.AddSource("Microsoft.AspNetCore.Components");
    tracerProvider.AddSource("Microsoft.AspNetCore.Components.Server.Circuits");
});

パフォーマンス メーター

次のパフォーマンス メーターの詳細については、「 ASP.NET Core 組み込みメトリック」を参照してください。

Microsoft.AspNetCore.Components 測定:

• aspnetcore.components.navigate: アプリ内のルート変更の合計数を追跡します。
• aspnetcore.components.handle_event.duration: ビジネス ロジックを含む、ブラウザー イベントの処理期間を測定します。

Microsoft.AspNetCore.Components.Lifecycle 測定:

• aspnetcore.components.update_parameters.duration: ビジネス ロジックを含むコンポーネント パラメーターの処理期間を測定します。
• aspnetcore.components.render_diff.duration: バッチのレンダリング期間を追跡します。
• aspnetcore.components.render_diff.size: レンダリング バッチのサイズを追跡します。

Microsoft.AspNetCore.Components.Server.Circuits 測定:

サーバー側の Blazor アプリでは、追加の回線固有のメトリックは次のとおりです。

• aspnetcore.components.circuit.active: 現在メモリ内にあるアクティブな回線の数を示します。
• aspnetcore.components.circuit.connected: クライアントに接続されている回線の数を追跡します。
• aspnetcore.components.circuit.duration:回路の有効期間を測定し、合計回路数を提供します。

Blazor トレース

次のトレース アクティビティの詳細については、「 ASP.NET Core 組み込みメトリック」を参照してください。

新しいアクティビティ トレース機能では、 Microsoft.AspNetCore.Components アクティビティ ソースが使用され、主に 3 種類のトレース アクティビティ (回線のライフサイクル、ナビゲーション、イベント処理) が提供されます。

回線ライフサイクル トレース:

Microsoft.AspNetCore.Components.StartCircuit: Circuit {circuitId}形式で回路の初期化をトレースします。

タグ：

• aspnetcore.components.circuit.id: 一意の回線識別子。
• error.type: 例外の種類のフル ネーム (省略可能)

リンク:

• HTTP 追跡
• SignalR 追跡

使用法: 同じセッション/回線の他の Blazor トレースを HTTP および SignalR コンテキストにリンクします。

ナビゲーション トレース:

Microsoft.AspNetCore.Components.Navigate: ルートの変更を Route {route} -> {componentType}形式で追跡します。

タグ：

• aspnetcore.components.route: ページの URL パス パターン。
• aspnetcore.components.type: Razor コンポーネントのクラス名。
• error.type: 例外の種類のフル ネーム (省略可能)。

リンク:

• HTTP 追跡
• SignalR 追跡
• 回線トレース

使用法: このセッションでアクセスした Blazor ページはどれですか?

イベント処理トレース:

Microsoft.AspNetCore.Components.HandleEvent: Event {attributeName} -> {componentType}.{methodName}形式でイベント処理をトレースします。

タグ：

• aspnetcore.components.attribute.name: イベントをトリガーする HTML 属性の名前 (例: onClick)。
• code.function.name: ハンドラーの C# メソッド名。
• aspnetcore.components.type: イベントを受信するターゲット C# コンポーネントのフル ネーム。
• error.type: 例外の種類のフル ネーム (省略可能)。

リンク:

• 回線トレース
• 経路追跡

用途：

• 例外の原因となったコンポーネントとページをクリックします。
• どのリンクされた回線で、どのような HTTP コンテキストが発生しましたか?