是什么导致 .wasm 加载图像如此缓慢？答案

【问题标题】：What could cause .wasm to load images so slowly?是什么导致 .wasm 加载图像如此缓慢？
【发布时间】：2021-11-18 15:45:51
【问题描述】：

在我的 Uno 测试项目中，将 50 张图像加载到 UWP 平台上的 ItemsWrapGrid 大约需要 4 秒。相同的图像需要 225 秒（3 分 45 秒）才能加载到 WrapPanel。由于代码中唯一的区别是 ItemsWrapGrid 或 WrapPanel，我认为问题出在 WrapPanel，但我不能确定，可能是平台如何实现

我对 .wasm 没有任何经验，所以我不知道这是否符合预期（是吗？）。我可以做些什么来优化 wasm 吗？

或任何其他想法？与大约 4 秒相比，4 分钟是不可接受的。

谢谢

感谢您询问我是否可以在 Uno Playground 进行复制。我不知道该网站。我无法在操场上重现，这导致我调查其他可能性。我已经解决了这个问题。

我的设计模式是定义一个单独的 ObservableCollection 而没有属性更改通知：

public ObservableCollection<PictureViewModel> Pictures {get;set }

我会将它绑定到我的 UserControl 并通过 Pictures.Clear() 进行更新。

这是导致渲染时间长的我的 sn-p：

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。

解决的代码sn-p是：

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);

我不明白为什么我的初始 Code Pattern 没有按预期工作，但可以忍受添加 OnPropertyChanged("Pictures") 通知。

【问题讨论】：

我在这个问题上放了一个秒表，发现在 wasm 中实际检索包含图像 URL 的数据库记录并填充图像 URL 的 ObservableCollection 只需不到一秒钟的时间。我还用显示图像的 ListView 替换了 GridView ListView 在大约 2 秒内显示图像。我猜增加的时间是在渲染中。即使我删除图像控件并离开 TextBlock 控件，使用 GridView 也需要 4-5 分钟。
您能否在playground.platform.uno 上重现该问题？
谢谢，我不知道 Uno Playground 网站。我无法在那里重现，这导致我从不同的方向寻找问题。我更新了我的帖子来解释我是如何解决这个问题的。

标签： uno-platform

【解决方案1】：

从 Uno 3.10 开始，WebAssembly 上的 ItemWrapGrid is not supported。使用 WrapPanel 控件将强制实现列表中的所有项目，从而使性能特别慢。

您没有指定将哪个控件用作面板，但如果您使用的是ListView 控件，则将启用虚拟化，但不会使用您需要的布局包装。

如果您想要虚拟化类似网格的布局，您还可以使用 ItemsRepeater control 及其布局（例如 FlowLayout、StackLayout 或 WCT 的 WrapLayout）。

【讨论】：