我的 Angular MatTable 如何快速显示 100 多个事件/秒？

Question

我有一个 Angular MatTable，它显示来自 websocket 的事件。我想更新 DOM 并跟上来自套接字的事件，这些事件每秒可能超过 100 条消息。我相信 Angular 虚拟 DOM 跟不上，而是每秒强制刷新几次。为了正确显示 websocket 提要的效果，我需要跟上数据（无论它多么难以辨认）。

在下面的代码中，我通过 RxJS WebSocketSubject 接收消息，这些消息被推送到 serverMessages。我只显示最近的 10 条消息。

export class FeedComponent {
    public serverMessages: Message[] = [{type: "application", data: "Connecting to message stream"}];
    public displayedColumns: string[] = ['type', 'data'];
    private socket$: WebSocketSubject<Message>;

    constructor(private detectorRef: ChangeDetectorRef) {

        this.socket$ = new WebSocketSubject(`ws://${env.gatewayHost}/api/liveupdates`);

        this.socket$
            .subscribe(
            (message) => {
                    this.serverMessages.push(message)
                    if(this.serverMessages.length > 9) this.serverMessages.shift()
                    this.serverMessages = [...this.serverMessages]
                },
            (err) => console.error(err),
            () => console.warn('Completed!')
            );

        this.socket$.next({type: "filter", data: "*"});
    }
}

MatTable 是这个的正确选择吗？我应该只用原始 TypeScript 修改 DOM 吗？有没有办法用每条消息强制刷新 DOM 或提高速率？

Answer 1

我可以看到三种可能无法解决此问题的方法，具体取决于运行浏览器的机器的性能。由于您正在有效地进行 DOM 操作。

将更改检测设置为手动。

这很容易，您不会花费资源对变量进行角度检查，并且您可以随时开始更新组件。 https://medium.com/angular-in-depth/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb

尝试使用纯 javascript 忽略虚拟 dom。

你知道演习。通过 id 获取元素并直接附加 html。它要快得多，但您必须放弃 MatTable，直接更改 DOM，这是不鼓励的。

添加动画

我认为这是最明智的事情。添加一个看起来像是添加了新行的动画，直到蒸汽停止至少一秒钟（或或多或少你必须对此做出判断）

这样，用户将无法阅读信息，但无论如何他都无法阅读，而且您不会将浏览器推到边缘。