javascript - Angular 2 : Enhance the performance of scroll event with a big ngFor List

Question

我正在开发一个网络聊天，聊天的结构显示如下消息:

<div class="scrollable" (scroll)="detectTop($event)">
    <div class="message-ballon" *ngfor="message in messages">
        <span class="time-chat" *ngIf="showTime(message)"> {{message.time}} </span>
        <p class="message-content"> {{message.content}} </p>
     </div>
</div>

我的DetectTop(e)函数检查scrollTop是否=== 0，如果是，它会从服务器获取更多消息并用它更新消息。

我的 showTime 函数将消息与其上面的消息进行比较，以检查它们是否是同一日期。

问题是应用程序非常慢，如果没有滚动事件，滚动可以正常工作并且速度非常快。

我真的很想提高性能，但我不知道如何提高。

有没有一种更快的方法来检测scrollTop事件并且不会对性能产生太大影响？

即使只有 10 条消息列表，这个问题也很严重，并且当消息超过 100 条时，滚动就会停止

Answer 1

尝试将跟踪器添加到 *ngFor 循环:

*ngFor="let message of messages; trackBy:messageTracker

在你的 JS 代码中:

messageTracker(index, message) {
  return message? message.id : undefined;
}

这将避免重新渲染滚动消息