asp.net-core - 如何解决 Blazor 中重新渲染缓慢的问题；如何获取各个组件的渲染时间？

Question

我有一个 Blazor WebAssembly 网站，并且组件树已经增长了不少。

在我的 Home 组件中，子组件“Foo”的更改可能会导致参数属性“IsChecked”发生更改；这些属性之一被传递到不同的子组件“Bar”中。因此，在我的 Home 组件中，Foo 的 EventCallback IsCheckedChanged 调用 StateHasChanged() 以便 Home 组件及其所有子组件重新 render .

这可能很慢......对我来说，即使只有一个 bool 属性发生变化，渲染和绘制也需要 1-2 秒。假设用户正在选中和取消选中多个复选框来触发此重新渲染:这种延迟对于每个复选框来说都是非常不受欢迎的。 (我已经排除了 Home 中的任何其他代码可能会减慢速度。)因此，我认为我必须找出哪些组件的哪些部分最慢，并且可能有 ShouldRender reutrn false在某些情况下，或者以其他方式在其中进行一些优化。我的问题是我看不到哪些组件对渲染时间影响最大​​。

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

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

Answer 1

(1) 从 C# 代码渲染到 HTML 的 DOM 是低级过程。 Blazor 调试过程仅允许查看对象/值的值。 没有现成的用于跟踪 Blazor 重新渲染过程的方法(从 C# 代码生成 DOM)。你可以看到技巧

(2) 您可以使用 DOM 更改跟踪:

• https://dev.to/apvarun/chrome-devtools-detecting-element-changes-gh6
• https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

(3) 通过使用 Blazor BaseComponent 放置在每个组件内的技巧使用计数器。 https://www.codeproject.com/Articles/5290129/Exploring-Blazor-Component-Rendering

https://allinoneserver.azurewebsites.net/wasm.html

使用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) 在问题之外，为了提高性能，请参阅 https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0#optimize-rendering-speed 处的优化渲染速度