当页面中涉及到大量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实现起来很难的.
可以用三方库,用双向数据绑定.实现起来简单很多.

Answer 2

看看这个https://segmentfault.com/a/11...

Answer 3

可以使用vue等MVVM的前端框架，它支持数据绑定，这样你可以专注于数据状态，DOM渲染它会帮你自动渲染的，查看https://cn.vuejs.org/v2/guide/