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

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的列表:
截屏2020-04-20 11.28.50.png

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

阅读 5.1k
3 个回答

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题