Asp.net core 如何解决Blazor中重新渲染速度慢的问题；如何获取每个组件的渲染时间？

我有一个Blazor WebAssembly站点，组件树已经增长了很多

在my Home组件中，子组件“Foo”中的更改可能会导致参数属性“IsChecked”更改；其中一个属性被传递到另一个子组件“Bar”。因此，在my Home组件中，Foo的EventCallback IsCheckedChanged调用

StateHasChanged（）

，以便Home组件及其所有子组件重新启动

这可能很慢…对我来说，渲染和绘制需要1-2秒，即使只有一个布尔属性发生更改。假设用户正在勾选和取消勾选几个复选框以触发此重新加载：每个复选框上的延迟都是非常不受欢迎的。（我已经排除了我在家中的任何其他代码可能会减慢速度。）因此我想我必须找出哪些组件的哪些部分速度最慢，并且在某些情况下，

应该呈现

reutrn false，或者在其中进行一些优化。我的问题是，我看不到哪些组件对渲染时间的贡献最大

那么，是否有任何方法可以查看或写出Blazor组件渲染所需的时间，如中所述的“渲染”？当然，我假设任何此类渲染时间都包括所有子级的渲染时间

有没有更好的方法来分析Blazor WebAssembly的渲染时间？

（1）从C代码到HTML的

DOM的渲染是低级过程。Blazor调试过程只允许查看对象/值的值没有现成的用于跟踪Blazor重新设计过程的程序（从C#代码生成DOM）。你们可以看到这个把戏

（2）您可以使用DOM更改跟踪：






（3）使用Blazor BaseComponent在每个组件内放置的技巧使用计数器



使用
BaseCounter

@inherits BaseCounter

// Markup the same as BaseCounter

@code {

    protected override string buttoncolor => "btn-success";

    protected override Task OnInitializedAsync()
    {
        Service.CounterChanged += ReRender;
        return base.OnInitializedAsync();
    }

    protected void ReRender(object sender, EventArgs e) => 
                                this.InvokeAsync(this.StateHasChanged);
}

组件从BaseCounter扩展而来，当调用每个组件时，计数器将增加值，它可以帮助您查看渲染的内容和渲染过程的顺序

（4）在问题之外，要提高性能，请参阅在优化渲染速度（1）从C代码渲染到HTML的
DOM
是低级过程。Blazor调试过程只允许查看对象/值的值没有现成的用于跟踪Blazor重新设计过程的程序（从C#代码生成DOM）。你们可以看到这个把戏

（2）您可以使用DOM更改跟踪：






（3）使用Blazor BaseComponent在每个组件内放置的技巧使用计数器



使用
BaseCounter

@inherits BaseCounter

// Markup the same as BaseCounter

@code {

    protected override string buttoncolor => "btn-success";

    protected override Task OnInitializedAsync()
    {
        Service.CounterChanged += ReRender;
        return base.OnInitializedAsync();
    }

    protected void ReRender(object sender, EventArgs e) => 
                                this.InvokeAsync(this.StateHasChanged);
}

组件从BaseCounter扩展而来，当调用每个组件时，计数器将增加值，它可以帮助您查看渲染的内容和渲染过程的顺序

（4）问题之外，要提高性能，请参阅
上的优化渲染速度，我不知道有任何评测服务。但是，如果您还没有看到，下面的文章有一些关于优化UI呈现的有趣信息。。。由于没有真正的代码可看，我建议您可能过度使用了
statehaschange
，并导致了大量不必要的渲染。考虑在组件需要重新呈现时使用状态服务和事件/ S来驱动。一些示例代码会有所帮助。我不知道有任何评测服务。但是，如果您还没有看到，下面的文章有一些关于优化UI呈现的有趣信息。。。由于没有真正的代码可看，我建议您可能过度使用了
statehaschange
，并导致了大量不必要的渲染。考虑在组件需要重新呈现时使用状态服务和事件/ S来驱动。一些示例代码可能会有所帮助。嘿@Do Nhu Vy，我认识到了那张图片和文章-我打算放弃它，因为它只得到了一张选票-作者签名@别担心，我听不懂。你能重新措辞吗？什么是“你可以看到技巧”？#3看起来是了解组件渲染多少次的好方法，但如何了解每次渲染（或某组渲染操作）所需的“时间”？如果我在
protected override void OnParametersSet（）中启动秒表
并在渲染后的
中停止它，由于异步性，我得到了包含其他组件渲染时间的时间数。嘿@Do-Nhu-Vy，我认出了那张图片和那篇文章-我打算放弃它，因为它只有一票-由作者签名！@Do-Nhu-Vy，我很难理解#1。你能重新措辞吗？是什么？”您可以看到技巧“？#3看起来是了解组件渲染次数的好方法，但如何了解每次渲染（或某组渲染操作）所需的“时间”？如果我在
protected override void OnParametersSet（）
中启动秒表，并在
OnAfterRender
中停止秒表，则由于异步，我会得到包含其他组件渲染时间的时间数。