node.js - Angular 4 中的数组推送导致浏览器卡住/卡住。如何解决此问题？

Question

我在logsCompoment.ts中有一个名为logs的数组，我将新日志推送到该数组并使用ngFor将日志写入html页面。 我按照以下方式执行此操作。

this.socket.on('newline', (data) => {
                this.logs.push(data);
                }
            });

在logsCompoment.html中，我执行以下操作来显示日志。

<li *ngFor="let log of logs" [innerHTML]="log"></li>

如果日志不经常出现，一切都会正常。但是，如果日志非常频繁地出现(例如每秒大约 1000 行)，则会卡住浏览器。 我的问题是，如何处理这种情况。如果我没有遵循正确的方法来实现这一点，请用正确的方法来回答我，这样浏览器就不会卡住。

Answer 1

您可以尝试将 rxjs Subject 与 bufferTime() 一起使用。这将使 DOM 更新保持一致的频率。

<小时/>

根据OP的要求，这里是工作示例。我使用了 bufferTime() 而不是之前建议的 debounce

这是 slackbitz 中的一个工作示例。 以及实际代码片段:

import { Subject } from 'rxjs';
import { scan, bufferTime } from 'rxjs/operators';
import { interval, Observable } from 'rxjs';

@Component({
  ...
})
export class AppComponent  {
  logs$ = new Subject();
  delayed$: Observable<string[]>;

  constructor () {} 

  ngOnInit() {
    this.delayed$ = this.logs$
    .pipe(
      bufferTime(5000),
      scan((acc: string[], curr: string[]) => [...acc, ...curr], []),
    );

    // stand in code to replace OP's .socket() event listener
    const source = interval(100);
    source.subscribe(num => this.logs$.next(`<p>Log Item ${num}</p>`))
  }
}

然后在你的html中，你只需要订阅即可。例如

<li *ngFor="let log of (delayed$ | async)" [innerHTML]="log"></li>