当页面中涉及到大量dom操作时有什么比较好的方法？

Question

最近做的一个监控项目大致场景如下：前端通过websocket监听后端推送的消息来更新页面，更新页面时涉及到大量的dom更新，问题就来了：

1，需要更新的页面数据比较多，而且数据都是那种枚举的、没有规律的，现在面临的一个最直接的问题就是代码写起来很麻烦，比如：

const allinfoDataMap = {

    name: document.getElementById('name'),

    age: document.getElementById('age'),

    gender: document.getElementById('gender'),

    address: document.getElementById('address'),

    //... 省略，下面还有好多

};

然后ajax拿到数据后，遍历allinfoDataMap，来更新对应的dom。

我就想问下，除了这种方式还有没有其他比较好的方式，最好是通过原生的js来实现。

2，页面的更新是比较频繁的更新，因为后端在不断的推送消息，所以频繁的更新大量dom是不是会带来性能这方面的问题？如果会，那么该怎么解决这个问题？

这个问题现在可能问的有点儿早（毕竟功能还没做完整，也没测试），但早点儿考虑，先给打个预防针，以免后续问题来了措手不及。

Answer 1

原生的js实现起来很难的.可以用三方库,用双向数据绑定.实现起来简单很多.