Uno项目中.wasm端图片加载缓慢的原因与优化方案

我在Uno测试项目中发现，UWP平台下往ItemsWrapGrid加载50张图片仅需约4秒，但同样的图片在.wasm平台下往WrapPanel加载却需要225秒（3分45秒）。代码中唯一的差异就是使用了ItemsWrapGrid或WrapPanel，我猜测问题出在WrapPanel，但也无法确定，也有可能是平台对<Image ItemsSource=""/>的实现逻辑导致的。
我没有.wasm相关开发经验，不知道这种情况是否属于正常现象，有没有可以针对.wasm做的优化？和4秒的加载速度相比，4分钟的耗时完全不可接受。

问题排查过程 #

之前有建议我在Uno Playground中复现问题，我之前不知道这个站点，在平台上我没能复现该问题，这促使我排查其他可能性，目前我已经解决了该问题。

我最初的设计模式是定义了一个没有属性变更通知的ObservableCollection：

public ObservableCollection<PictureViewModel> Pictures {get;set }

我将它绑定到我的UserControl，通过Pictures.Clear()来更新数据。
以下是导致渲染耗时极长的代码片段：

List<Picture> PictList = await DataService.GetPicturesByEvent(this.SelectedEvent.EvtKey, clubkey, skipPosition, this.PagingViewModel.PageSize);
List<PictureViewModel> PictVMList = mapper.Map<List<Picture>, List<PictureViewModel>>(PictList);
if (PictVMList != null && this.SelectedEvent != null && !string.IsNullOrEmpty(SelectedEvent.FilePath))
{
    this.Pictures.Clear();
    foreach (PictureViewModel item in PictVMList)
    {
        item.Parent = this;
        item.SetURL(SelectedEvent);
        this.Pictures.Add(item);
    }
    this.SelectedPicture = PictVMList.Count > 0 ? PictVMList.First() : null; 
}

解决方案 #

为解决渲染耗时过长的问题，我做了以下调整：

• 为ObservableCollection添加属性变更通知
• 移除所有Picture.Clear()的调用
• 每次需要更新数据时直接创建新的ObservableCollection实例

修复后的代码片段如下：

List<Picture> PictList = await DataService.GetPicturesByEvent(this.SelectedEvent.EvtKey, clubkey, skipPosition, this.PagingViewModel.PageSize);
List<PictureViewModel> PictVMList = mapper.Map<List<Picture>, List<PictureViewModel>>(PictList);
if (PictVMList != null && this.SelectedEvent != null && !string.IsNullOrEmpty(SelectedEvent.FilePath))
{
    foreach (PictureViewModel item in PictVMList)
    {
        item.Parent = this;
        item.SetURL(SelectedEvent);
    }
    this.SelectedPicture = PictVMList.Count > 0 ? PictVMList.First() : null;                        
}
Pictures = new ObservableCollection<PictureViewModel>(PictVMList);

我暂时还不清楚最初的代码模式为什么没有达到预期效果，但添加OnPropertyChanged("Pictures")通知的方案目前可以正常使用。

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