如何对Blazor页面加载进行性能分析？含数据库查询等场景

一、测量数据库查询耗时 #

• EF Core日志追踪：如果用EF Core，直接开启数据库命令日志。在Program.cs里添加配置：

  builder.Logging.AddFilter("Microsoft.EntityFrameworkCore.Database.Command", LogLevel.Information);
  

  运行程序后，日志里会输出类似Executed DbCommand (XXms)的条目，直接显示每个查询的执行耗时。
• 自定义命令拦截器：实现EF Core的DbCommandInterceptor，在ReaderExecutingAsync和ReaderExecutedAsync等方法前后记录时间戳，计算差值后输出或统计。这种方式能更灵活地过滤和汇总查询耗时。
• 数据库端工具：直接用数据库自带的性能追踪工具，比如SQL Server Profiler、PostgreSQL的pg_stat_statements扩展、MySQL的Slow Query Log。这些工具能捕获数据库层面的真实执行耗时，包括锁等待、索引开销等细节。

二、Blazor页面创建与渲染的其他环节测量 #

如果dotTrace没覆盖到全链路，重点测这些环节：

• 组件生命周期方法：追踪ComponentBase的OnInitializedAsync、OnParametersSetAsync等方法耗时。可以在组件代码里手动加计时：

  protected override async Task OnInitializedAsync()
  {
      var start = DateTime.UtcNow;
      // 原有逻辑
      var elapsed = DateTime.UtcNow - start;
      Console.WriteLine($"OnInitializedAsync耗时：{elapsed.TotalMilliseconds}ms");
  }
  

  或者在dotTrace里筛选这些方法的调用栈，查看总耗时。
• 渲染树构建与Diff：Blazor的渲染过程依赖RenderTreeBuilder，可以在浏览器F12的Performance面板录制页面加载过程，找到Blazor相关的渲染任务，查看每个组件的渲染耗时。也可以用dotTrace追踪RenderFragment的执行栈，定位耗时的渲染逻辑。
• 异步依赖操作：页面中除了DB查询的其他异步任务（比如API调用、缓存读取），需要在异步方法前后加计时，或者用Stopwatch类统计：

  var stopwatch = Stopwatch.StartNew();
  await FetchSomeDataFromApi();
  stopwatch.Stop();
  Console.WriteLine($"API调用耗时：{stopwatch.ElapsedMilliseconds}ms");
  

• JS互操作（JSInterop）：如果页面有调用JS的逻辑，C#侧只能追踪调用发起的耗时，JS侧的执行需要在JS代码里用console.time和console.timeEnd标记：

  console.time("js-operation");
  // JS逻辑
  console.timeEnd("js-operation");
  

  这样能看到JS代码的真实执行耗时。

内容的提问来源于stack exchange，提问作者David Thielen