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

yangtoude
  • 326

最近做的一个监控项目大致场景如下:前端通过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是不是会带来性能这方面的问题?如果会,那么该怎么解决这个问题?
这个问题现在可能问的有点儿早(毕竟功能还没做完整,也没测试),但早点儿考虑,先给打个预防针,以免后续问题来了措手不及。

回复
阅读 1.4k
3 个回答

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

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

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