javascript - 消息组件 super 慢

Question

我有一个消息传递组件，可以与我系统中的其他用户一起编写消息。问题是，当我打开该组件时，网站速度变得非常慢，并且需要长达 15 秒的时间才能加载消息。我可以在代码中做哪些不同的事情来使其正常工作？

allMessages() {
    return this.messages.concat(this.uploadingMessages);
}

<ng-container #messageList *ngFor="let m of allMessages(); let i = index; trackBy: trackByMessageId">
    <div *ngIf="case !== null" [class.unread]="case.hasReadUntilTimestamp < m.timestamp && !m.sender.isMe && !m.setRead">


    <div class="newMessage">
        <div class="newMessage__line"></div>
        <div class="newMessage__line"></div>
    </div>

    <div class="row messageAndHeader line" *ngIf="allMessages()[i - 1]?.sender.id !== m.sender.id; else elseBlock">
    <div class="row messageInfo">
        <div class="profileImg">
            <img *ngIf="m.sender.profileImageUrl !== null" [src]="m.sender.profileImageUrl" />
 *ngIf="m.sender.profileImageUrl === null">
        </div>

Answer 1

在 Angular DOM 中，所有事件都会刷新，所以这里 allMessages() 将被重复调用，所以在 NgOnInit() 中执行此操作分配给一个变量，如下所示

ngOnInit(){
 this.allMesage = this.messages.concat(this.uploadingMessages);
}

并在 compoent.html 中修改代码如下

<ng-container #messageList *ngFor="let m of allMessage; let i = index; trackBy: trackByMessageId">

如果在进行 API 调用后填充消息，则添加异步管道，如下所示

<ng-container #messageList *ngFor="let m of allMessage | async; let i = index; trackBy: trackByMessageId">

并删除ngif中的调用方法

<div class="row messageAndHeader line" *ngIf="allMessage[i - 1]?.sender.id !== m.sender.id; else elseBlock">

如果是api调用，修改ngOnInit()中的代码如下

ngOnInit(){
apiCall.subscribe(data=>{
 this.allMesage = data.messages.concat(data.uploadingMessages);
},
error=>{
console.log(error)
})