Blazor中如何获取不含子组件的单个组件渲染耗时？

当前你使用的代码统计的是组件包含所有子组件的总渲染耗时，要单独统计组件自身内容的渲染耗时，可通过自定义一个「计时边界组件」来拦截子组件的渲染阶段，实现父组件计时器的暂停与恢复。

实现步骤 #

1. 创建计时边界组件

这个组件会通过级联参数接收父组件的计时器，在子组件开始渲染前暂停计时，子组件渲染完成后恢复计时：

public class RenderTimerBoundary : ComponentBase
{
    [CascadingParameter]
    public Stopwatch? ParentRenderTimer { get; set; }

    protected override void OnInitialized()
    {
        // 进入子组件渲染阶段，暂停父组件计时器
        ParentRenderTimer?.Stop();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        // 子组件渲染完成，恢复父组件计时器
        ParentRenderTimer?.Start();
    }
}

2. 修改目标组件的计时逻辑

保留原有基础计时逻辑，确保计时器能被级联传递给边界组件：

private Stopwatch? RenderTimer { get; set; } = null;

protected override void OnInitialized() => RenderTimer = Stopwatch.StartNew();

protected override bool ShouldRender()
{
    RenderTimer = Stopwatch.StartNew();
    return true;
}

protected override void OnAfterRender(bool firstRender)
{
    if (RenderTimer == null) return;
    RenderTimer.Stop();
    Console.WriteLine($"{(int)RenderTimer.ElapsedMilliseconds} ms 仅渲染 {GetType().Name} 自身内容");
}

3. 在Razor视图中包裹子组件

将所有子组件用RenderTimerBoundary包裹，同时通过级联值传递父组件的计时器：

@* 父组件自身的渲染内容，这部分耗时会被统计 *@
<div>@GetType().Name 的自有内容</div>

@* 用边界组件包裹子组件，这部分渲染耗时会被排除 *@
<CascadingValue Value="RenderTimer">
    <RenderTimerBoundary>
        <ChildComponent1 />
        <ChildComponent2 />
    </RenderTimerBoundary>
</CascadingValue>

原理说明 #

• 当Blazor渲染到RenderTimerBoundary时，OnInitialized生命周期方法会触发，暂停父组件的计时器，此时子组件的渲染过程不会计入父组件的耗时。
• 子组件全部渲染完成后，OnAfterRender方法触发，重新启动父组件的计时器，继续统计父组件后续自有内容的渲染时间。

内容的提问来源于stack exchange，提问作者Patrick Szalapski