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

我有一个角床垫，它显示了websocket中的事件。我希望更新DOM并跟上来自套接字的事件，这些事件每秒可以超过100条消息。我相信角度虚拟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: "*"});
    }
}

导出类FeedComponent{
公共服务器消息：消息[]=[{类型：“应用程序”，数据：“连接到消息流”}]；
公共显示列：字符串[]=['type'，'data']；
私有套接字$：WebSocketSubject；
构造函数（私有detectorRef:ChangeDetectorRef）{
this.socket$=新的WebSocketSubject（`ws://${env.gatewayHost}/api/liveupdates`）；
这个插座$
.订阅(
（信息）=>{
this.serverMessages.push（消息）
如果（this.serverMessages.length>9）this.serverMessages.shift（）
this.serverMessages=[…this.serverMessages]
},
（错误）=>控制台错误（错误），
（）=>console.warn（'Completed！'）
);
this.socket$.next（{type:“filter”，data:“*”}）；
}
}

---

MatTable是正确的选择吗？我应该用raw-TypeScript修改DOM吗？是否有办法强制使用每条消息刷新DOM或提高速率？

我可以看到三种方法来解决这一问题，这可能不起作用，具体取决于运行浏览器的机器的性能。因为您正在有效地进行DOM操作

将更改检测设置为手动。 这很容易，您将不会花费资源对变量进行角度检查，并且您可以随时启动组件的更新

尝试使用纯javascript忽略虚拟dom。 你知道该怎么做。通过id获取元素并直接附加html。它的速度要快得多，但您必须删除MatTable，直接更改DOM，这是不鼓励的

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

---

这样，用户将无法阅读信息，但他无论如何也无法阅读，您也不会将浏览器推向边缘

原始DOM操作是一种方法，但我确实有一个问题。似乎出于效率的考虑，Chrome只在空闲时重画。因此，为了强制重画，我必须实现手动滚动。