我的AngularMatTable如何快速显示100+events/sec？

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 操作。

将更改检测设置为手动。

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

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

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

添加动画

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

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

我的AngularMatTable如何快速显示100+events/sec？

How can my Angular MatTable quickly display 100+ events/sec?

rxjs

typescript

virtual-dom

angular

angular6

将更改检测设置为手动。

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

添加动画