Blazor WASM每秒调用StateHasChanged更新UI卡顿如何解决

卡顿原因分析 #

• 核心问题是使用Thread.Sleep(1000)阻塞了Blazor WASM唯一的主线程：WASM运行在浏览器JS单线程环境下，Thread.Sleep会直接挂起整个线程，所有UI交互、事件响应都会被暂停，直到休眠结束，这就是鼠标悬停响应延迟的直接原因。
• Parallel.Invoke不支持异步委托，传入的async ()匿名函数会被识别为async void，不仅无法正确等待异步操作完成，还会导致异常无法捕获，执行逻辑混乱。
• UI渲染未做优化，集合更新时全量重渲DOM也会额外增加性能开销。

修复方案 #

1. 重构后台更新逻辑 #

替换Parallel.Invoke和Thread.Sleep，改用纯异步无阻塞的定时更新逻辑，组件销毁时记得取消任务避免内存泄漏。
正确代码示例：

// 组件类里定义取消令牌源
private CancellationTokenSource _cts = new();

protected override async Task OnInitializedAsync()
{
    // 启动更新任务，不要阻塞初始化流程
    _ = RunUpdateLoop(_cts.Token);
    await base.OnInitializedAsync();
}

private async Task RunUpdateLoop(CancellationToken ct)
{
    while(!ct.IsCancellationRequested && !_viewModel.DisConnect)
    {
        await _viewModel.SetThings();
        await InvokeAsync(StateHasChanged);
        // 用Task.Delay替代Thread.Sleep，不会阻塞主线程
        await Task.Delay(1000, ct);
    }
}

// 组件销毁时取消循环
public void Dispose()
{
    _cts.Cancel();
    _cts.Dispose();
}

2. 优化UI渲染性能 #

当前UI代码存在笔误（循环变量是rsi但使用了things），同时增加渲染优化配置：

@* 加@key指定唯一标识，Blazor只会更新变化的项，减少DOM操作 *@
@foreach(var rsi in _viewModel.things)
{
    <div class="row" @key="rsi.Code">
        <div class="col text-center">
            <span>Code: @rsi.Code</span>
        </div>
        <div class="col text-center">
            @* 建议把截断计算放到SetThings里提前完成，避免渲染时重复计算 *@
            <span>value: @(Math.Truncate(rsi.Value * 10000) / 10000)</span>
        </div>
    </div>
}

额外优化建议 #

• 如果_viewModel.things数据量超过100条，建议采用分页或者虚拟滚动渲染，进一步降低DOM节点数量。
• 确认_viewModel.SetThings()没有同步阻塞操作，如果有IO操作全部改成异步实现，避免占用主线程时间。

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