前端什么开发框架更适合做高频数据更新?

Question

RT，题主想开发一个类似于服务器监控的管理平台，特点是由WebSocket驱动的高频数据更新需要渲染到页面。

可能是之前考虑不周，采用了Vue+Vuex开发，现在遇到性能问题。

总结：

• 希望知道能更好处理高频数据更新的开发框架或技术；
• 希望知道Vue+Vuex是不是真的无法胜任，还是有较大的优化空间；

以下是现在遇到性能问题的做法（WebSocket 1秒200 Receive 左右）：

//  WebSocket 会 commit 规定好的 mutations：
SOCKET_ONOPEN (state, event) {},
SOCKET_ONCLOSE (state) {},
SOCKET_ONERROR (state, event) {},
SOCKET_ONMESSAGE (state, message) {
    // 节流处理
    throttlePointer(this, message)
},
SOCKET_RECONNECT (state, count) {},
SOCKET_RECONNECT_ERROR (state) {},

//  节流处理
const throttlePointer = throttle(function(self, message) {
    // 数据根据业务分类后 dispatch 给不同 module 的 actions
    if ('spotPrice' in message) {
        self.dispatch('spotModule/subscribeMessage', message, { root: true })
    }
    else if ('fwdPrice' in message) {
        self.dispatch('swapModule/subscribeMessage', message, { root: true })
        self.dispatch('fwdModule/subscribeMessage', message, { root: true })
    }
}, 100)

数据根据上面方法分给不同的 module，相关module拿到数据后用 ES6 Map() map.set('数量作为key', message)，因为所有数据都有一个数量字段值是1～10，所以得到一个长度是10的列表：

本来ws一秒200推可以让页面数据列表的每一列看起来是一秒一刷，现在为了操作的流畅控制ws一秒10推，页面一行刷完才刷下一行

Answer 1

方案本身没问题，可能是处理业务逻辑哪里出了问题，推荐给业务代码写测试看看运行时间，检查有无内存泄露之类
指 1s 接受 200 次数据推送？
如果接受 200 次肯定是业务逻辑有问题的，需要后端配合前端修改

Answer 2

没有框架会针对频繁更新设计，但多半可以从业务代码入手优化。常规的节流、区域更新都可以考虑。另外现在显示器最高也就 144hz，大部分还不到 60hz，你整个 200次/秒也没啥意义。

Answer 3

看上面的回答与你的回复.
你需要的是节流或者批处理.
框架的上限是原生dom,你这样推送渲染的频率,用原生dom操作都顶不住.

要么后端更改推送逻辑,一次推送N条数据.
要么前端做个缓冲处理,积攒了若干数据,在线程空闲时一次性进行渲染.

---update---
另外,推送多了,列表是否变得非常长?dom多了,渲染起来必然也会卡顿.
如果业务允许,应该把旧数据移除.
如果不允许,就需要借助虚拟卷轴之类的类库进行优化.