Condividi tramite


Procedure ottimali per le prestazioni di ASP.NET Core Blazor

Annotazioni

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 10 di questo articolo.

Avvertimento

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Blazor è ottimizzato per prestazioni elevate negli scenari più realistici dell'interfaccia utente dell'applicazione. Tuttavia, le prestazioni migliori dipendono dagli sviluppatori che adottano i modelli e le funzionalità corretti.

Annotazioni

Gli esempi di codice in questo nodo di articoli adottano tipi di riferimento nullable (NRT) e l'analisi statica dello stato null del compilatore .NET, i quali sono supportati in ASP.NET Core a partire da .NET 6 o successive.

Compilazione anticipata (AOT)

La compilazione AOT (Ahead-of-Time) compila il codice .NET di un'app Blazor direttamente in WebAssembly nativo per l'esecuzione diretta dal browser. Le app compilate con AOT comportano app di dimensioni maggiori che richiedono più tempo per il download, ma le app compilate con AOT in genere offrono prestazioni di runtime migliori, soprattutto per le app che eseguono attività a elevato utilizzo di CPU. Per ulteriori informazioni, vedere gli strumenti di costruzione di ASP.NET Core Blazor WebAssembly e la compilazione anticipata (AOT).

Metriche e tracciamento

Le metriche e le funzionalità di traccia consentono di monitorare e diagnosticare le prestazioni delle app, tenere traccia delle interazioni degli utenti e comprendere il comportamento dei componenti negli ambienti di produzione.

Configurazione

Per abilitare Blazor le metriche e il tracciamento nell'app, configura OpenTelemetry con i seguenti contatori e le seguenti origini di attività nel file dell'app Program in cui vengono registrati i servizi.

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");
});

Contatori delle prestazioni

Per altre informazioni sui contatori delle prestazioni seguenti, vedere metriche predefinite di ASP.NET Core.

Microsoft.AspNetCore.Components metro:

  • aspnetcore.components.navigate: tiene traccia del numero totale di modifiche alla route nell'app.
  • aspnetcore.components.handle_event.duration: misura la durata dell'elaborazione degli eventi del browser, inclusa la logica di business.

Microsoft.AspNetCore.Components.Lifecycle metro:

  • aspnetcore.components.update_parameters.duration: misura la durata dei parametri dei componenti di elaborazione, inclusa la logica di business.
  • aspnetcore.components.render_diff.duration: tiene traccia della durata dei batch di rendering.
  • aspnetcore.components.render_diff.size: tiene traccia delle dimensioni dei batch di rendering.

Microsoft.AspNetCore.Components.Server.Circuits metro:

Nelle app lato server Blazor, le metriche aggiuntive specifiche del circuito includono:

  • aspnetcore.components.circuit.active: mostra il numero di circuiti attivi attualmente in memoria.
  • aspnetcore.components.circuit.connected: tiene traccia del numero di circuiti connessi ai client.
  • aspnetcore.components.circuit.duration: misura la durata del circuito e fornisce il numero totale di circuiti.

Blazor tracciatura

Per altre informazioni sulle attività di traccia seguenti, vedere metriche predefinite di ASP.NET Core.

Le nuove funzionalità di tracciamento delle attività utilizzano la sorgente di attività Microsoft.AspNetCore.Components e forniscono tre tipi principali di attività di tracciamento: tracciamento del ciclo di vita del circuito, tracciamento della navigazione e gestione degli eventi.

Tracciatura del ciclo di vita del circuito

Microsoft.AspNetCore.Components.StartCircuit: traccia l'inizializzazione del circuito con il formato Circuit {circuitId}.

Tag:

  • aspnetcore.components.circuit.id: identificatore univoco del circuito.
  • error.type: nome completo del tipo di eccezione (facoltativo)

Collegamenti:

  • Traccia HTTP
  • SignalR traccia

Utilizzo: collega altre Blazor tracce della stessa sessione/circuito a HTTP e contesti SignalR.

Tracciamento della navigazione

Microsoft.AspNetCore.Components.Navigate: tiene traccia delle modifiche del percorso con il formato Route {route} -> {componentType}.

Tag:

  • aspnetcore.components.route: modello di percorso URL della pagina.
  • aspnetcore.components.type: nome della classe del Razor componente.
  • error.type: nome completo del tipo di eccezione (facoltativo).

Collegamenti:

  • Traccia HTTP
  • SignalR traccia
  • Traccia circuitale

Utilizzo: quali Blazor pagine sono visitate da questa sessione?

Monitoraggio della gestione degli eventi:

Microsoft.AspNetCore.Components.HandleEvent: traccia la gestione degli eventi con il formato Event {attributeName} -> {componentType}.{methodName}.

Tag:

  • aspnetcore.components.attribute.name: nome dell'attributo HTML che attiva l'evento (ad esempio: onClick).
  • code.function.name: nome del metodo C# del gestore.
  • aspnetcore.components.type: nome completo del componente C# di destinazione che riceve l'evento.
  • error.type: nome completo del tipo di eccezione (facoltativo).

Collegamenti:

  • Traccia circuitale
  • Traccia di percorso

Usi:

  • Fare clic su quale componente ha causato un'eccezione e su quale pagina?
  • In quale circuito collegato e con quale contesto HTTP è successo?