如何解决 Blazor 中缓慢的重新渲染问题；如何获取每个组件的渲染时间？

Question

我有一个 Blazor WebAssembly 站点，并且组件树增长了很多。

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

这可能会很慢......对我来说，即使只有一个布尔属性发生变化，渲染和绘制也需要 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://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0#optimize-rendering-speed