Aurelia - 提升 repeat.for 视图渲染的性能
Aurelia - boosting performance of repeat.for view rendering
我有一个所谓的聊天视图，它基本上由一个 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>
您应该查看 aurelia-ui-virtualization 库。一旦你加载它，你可以在这样的地方用 virtual-repeat.for 替换 repeat.for ，你将得到一个虚拟化的中继器，这将有助于提高这种情况下的性能。
我认为您需要考虑为此完全不使用 <compose>。你有理由需要 <compose> 吗？当您考虑它时，<compose 元素必须通过相同的视图 instantiation/binding 逻辑重新 运行，每次显示一条消息时，Aurelia 都会为其他所有内容执行此操作。
我会亲自创建一个 HTML 部分，其中包含一些可绑定属性并在循环内部引用它。所以你可能有 chat-message.html 然后像这样显示它：
<li repeat.for="message of messages">
<chat-message message.bind="message"></chat-message>
</li>
在可能的情况下（在大多数情况下应该这样做），避免对可能存在大量重复项的动态组合。
我有一个所谓的聊天视图，它基本上由一个 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>
您应该查看 aurelia-ui-virtualization 库。一旦你加载它，你可以在这样的地方用 virtual-repeat.for 替换 repeat.for ，你将得到一个虚拟化的中继器，这将有助于提高这种情况下的性能。
我认为您需要考虑为此完全不使用 <compose>。你有理由需要 <compose> 吗？当您考虑它时，<compose 元素必须通过相同的视图 instantiation/binding 逻辑重新 运行，每次显示一条消息时，Aurelia 都会为其他所有内容执行此操作。
我会亲自创建一个 HTML 部分，其中包含一些可绑定属性并在循环内部引用它。所以你可能有 chat-message.html 然后像这样显示它：
<li repeat.for="message of messages">
<chat-message message.bind="message"></chat-message>
</li>
在可能的情况下（在大多数情况下应该这样做），避免对可能存在大量重复项的动态组合。