Angular2：用大ngFor列表

我正在開發一個網絡聊天提高滾動事件的性能，聊天的structute這樣表示消息：Angular2：用大ngFor列表

<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多個形式交往滾動停止

來源

2017-02-24 vladwoguer

消息你有一個plnkr演示這樣嗎？ – pixelbits

這是否發生在所有瀏覽器上？ – JavascriptLoser

在Firefox上，它的運行速度比在Chrome上快得多 – vladwoguer

嘗試添加跟蹤到* ngFor循環：

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

，並在您的JS代碼：

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

這將避免再次渲染上滾動

來源

2017-05-09 14:01:14 Andrea

Angular2：用大ngFor列表

回答

相關問題