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推,页面一行刷完才刷下一行
方案本身没问题,可能是处理业务逻辑哪里出了问题,推荐给业务代码写测试看看运行时间,检查有无内存泄露之类
指 1s 接受 200 次数据推送?
如果接受 200 次肯定是业务逻辑有问题的,需要后端配合前端修改