通过

ASP.NET 核心 Blazor 性能最佳做法

注释

此版本不是本文的最新版本。 要查看当前版本，请参阅本文的.NET 9 版本。

警告

此版本的 ASP.NET Core 不再受支持。 有关详细信息，请参阅 .NET 和 .NET Core 支持策略。 要查看当前版本，请参阅本文的.NET 9 版本。

重要

此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft对此处提供的信息不作任何明示或暗示的保证。

要查看当前版本，请参阅本文的.NET 9 版本。

Blazor 在最现实的应用程序 UI 方案中针对高性能进行优化。 但是，最佳性能取决于采用正确模式和功能的开发人员。

注释

本文节点中的代码示例采用了可为空引用类型（NRT）和 .NET 编译器空状态静态分析，它们在 .NET 6 或更高版本的 ASP.NET Core 中得到支持。

预先 (AOT) 编译

预先 (AOT) 编译将 Blazor 应用的 .NET 代码直接编译到原生 WebAssembly 中，供浏览器直接执行。 AOT 编译的应用会导致下载时间较长的较大应用，但 AOT 编译的应用通常提供更好的运行时性能，尤其是对于执行 CPU 密集型任务的应用。 有关详细信息，请参阅 ASP.NET Core Blazor WebAssembly 生成工具和预先 (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.navigation：跟踪应用中的路由更改总数。
  • aspnetcore.components.event_handler：度量处理浏览器事件的持续时间，包括业务逻辑。

Microsoft.AspNetCore.Components.Lifecycle 计量：

  • aspnetcore.components.update_parameters：度量处理组件参数（包括业务逻辑）的持续时间。
  • aspnetcore.components.render_diff：跟踪呈现批处理的持续时间。

Microsoft.AspNetCore.Components.Server.Circuits 计量：

在服务器端 Blazor 应用中，其他特定于线路的指标包括：

  • aspnetcore.components.circuit.active：显示当前内存中的活动线路数。
  • aspnetcore.components.circuit.connected：跟踪连接到客户端的线路数。
  • aspnetcore.components.circuit.duration：测量线路生存期持续时间并提供总线路计数。

Blazor 跟踪

有关以下跟踪活动的详细信息，请参阅 ASP.NET 核心内置指标。

新的活动跟踪功能使用 Microsoft.AspNetCore.Components 活动源并提供三种主要类型的跟踪活动：线路生命周期、导航和事件处理。

线路生命周期跟踪：

Microsoft.AspNetCore.Components.CircuitStart：使用格式 Circuit {circuitId}记录电路初始化。

标记：

  • aspnetcore.components.circuit.id：唯一的线路标识符。
  • error.type：异常类型全名（可选）

链接：

  • HTTP 跟踪
  • SignalR trace

用法：将同一会话/线路的其他 Blazor 跟踪关联到 HTTP 和 SignalR 上下文。

导航跟踪：

Microsoft.AspNetCore.Components.RouteChange：以 Route {route} -> {componentType} 格式跟踪路线变化。

标记：

  • aspnetcore.components.route：页面的 URL 路径模式。
  • aspnetcore.components.type：组件的类名 Razor 。
  • error.type：异常类型全名（可选）。

链接：

  • HTTP 跟踪
  • SignalR trace
  • 电路跟踪

用法：此会话访问哪些 Blazor 页面？

事件处理跟踪：

Microsoft.AspNetCore.Components.HandleEvent：使用格式 Event {attributeName} -> {componentType}.{methodName} 跟踪事件处理。

标记：

  • aspnetcore.components.attribute.name：触发事件的 HTML 属性的名称（示例： onClick） 。
  • aspnetcore.components.method：处理程序的 C# 方法名称。
  • aspnetcore.components.type：接收事件的目标 C# 组件的完整名称。
  • error.type：异常类型全名（可选）。

链接：

  • HTTP 跟踪
  • SignalR trace
  • 电路跟踪
  • 路由跟踪

用法：

  • 单击查看导致异常的组件以及它所在的页面。
  • 它发生在哪个已链接的电路中？使用了哪个 HTTP 上下文？