ViewModel属性变更触发重负载渲染任务的最优方案咨询

直接在CurrentTime属性的setter中同步执行Render()会阻塞UI线程，尤其在快速拖动时间滑块（scrub）或播放时，会堆积大量渲染任务，导致UI卡顿、响应延迟。要满足「不冻结UI、丢弃过时帧、低延迟」三个目标，核心方案是异步渲染+任务取消机制，以下是具体实现思路：

核心实现逻辑 #

把渲染任务移到后台线程执行，同时维护一个可取消的任务令牌，每当新的时间点到来时，终止未完成的旧渲染任务，只保留最新的任务，确保始终只处理当前最新的时间帧。

具体步骤&代码示例 #

private TimeSpan _currentTime;
private CancellationTokenSource _renderCts;
private WriteableBitmap _writeableBitmap; // 你的后台缓冲区对象

public TimeSpan CurrentTime
{
    get => _currentTime;
    set
    {
        if (_currentTime == value) return;
        
        _currentTime = value;
        TriggerRender();
    }
}

private void TriggerRender()
{
    // 取消并清理之前未完成的渲染任务
    _renderCts?.Cancel();
    _renderCts?.Dispose();
    _renderCts = new CancellationTokenSource();
    var token = _renderCts.Token;
    var targetTime = _currentTime; // 捕获当前时间，避免后续被修改

    // 后台执行渲染任务
    Task.Run(async () =>
    {
        try
        {
            // 先检查是否已被取消，避免做无用功
            token.ThrowIfCancellationRequested();
            
            // 执行帧渲染：基于targetTime写入WriteableBitmap后台缓冲区
            // 注意：不同平台对WriteableBitmap的线程安全操作有差异，比如WPF需先Lock再操作BackBuffer
            RenderFrame(targetTime, token);
            
            // 渲染完成后回到UI线程标记脏状态
            await Application.Current.Dispatcher.InvokeAsync(() =>
            {
                // 再次校验时间，避免标记过时的帧
                if (_currentTime != targetTime) return;
                
                // 触发UI更新
                _writeableBitmap.Invalidate();
            });
        }
        catch (OperationCanceledException)
        {
            // 任务被取消，无需额外处理
        }
    }, token);
}

private void RenderFrame(TimeSpan targetTime, CancellationToken token)
{
    using (var buffer = _writeableBitmap.Lock())
    {
        // 你的渲染逻辑：根据targetTime生成像素数据写入缓冲区
        // 过程中可定期检查令牌，及时终止过时任务
        token.ThrowIfCancellationRequested();
        // ... 写入像素数据的逻辑
    }
}

关于命令实现的可行性 #

完全可以用命令模式实现，尤其适合MVVM架构场景。将渲染触发逻辑包装成ICommand，用户操作滑块或播放按钮时触发命令并传递当前时间即可，核心逻辑和上述一致：

public ICommand RenderFrameCommand { get; }

// 构造函数中初始化命令
public YourViewModel()
{
    RenderFrameCommand = new RelayCommand<TimeSpan>(time =>
    {
        CurrentTime = time;
        // 或直接调用TriggerRender()
    });
}

额外优化建议 #

• 渲染节流：针对快速scrub场景，可添加10-20ms的延迟，等用户停止拖动后再触发渲染，减少无效任务（可用DispatcherTimer或Task.Delay结合取消令牌实现）。
• 帧缓存：对用户频繁访问的时间点缓存渲染结果，避免重复渲染。
• 硬件加速：尽可能使用平台提供的硬件加速API（如DirectX、SkiaSharp GPU渲染），降低单帧渲染耗时。

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