Aurelia - 提升repeat.for视图渲染的性能

Question

我有一个所谓的聊天视图,它基本上包含一个repeat.for遍历所有消息并使用呈现消息视图的聊天视图<compose>.

问题是,一旦消息计数超过50并且用户在聊天之间导航(这会触发repeat.for更新,因为我替换VM中的数据集),它变得非常慢.

在处理这样的视图方面,我觉得我做错了.我能否就其他替代品获得一些意见？

我尝试过UI虚拟化,但不幸的是,当前的插件不支持我需要的功能(可变高度项,自底向上对齐).

我还对绑定进行了相当多的优化,大多数是一次性的,对数据集的更新都是去抖动的.但这并没有改善事情,因为主要的瓶颈是初始负载(第一次绑定视图).

谢谢!

当前方法的示例:

<li repeat.for="message of chat.messages">
  <compose  view-model.bind="getMessageViewFromMessage(message) & oneTime"
            model.bind="message & oneTime"
            containerless>
  </compose>
</li>

Answer 1

我认为你需要考虑<compose>根本不使用这个。有你需要的理由吗<compose>？仔细想想，<compose每次显示消息时，该元素都必须重新运行 Aurelia 为其他所有内容所做的相同视图实例化/绑定逻辑。

我会亲自创建一个带有一些可绑定属性的 HTML 部分，并在循环内部引用它。所以你可能会chat-message.html像这样显示它：

<li repeat.for="message of messages">
    <chat-message message.bind="message"></chat-message>
</li>

在可能的情况下（在大多数情况下应该如此），避免对潜在的大量重复项目进行动态组合。