从数据库中查询得到的数据事行级数据的集合,但是echarts图形的数据源却是列级的数据集合,那么如何快速的为两个展现类型准备好数据呢?
比如,我从数据库中查询得到得数据是Data是List<Map<String,Object>>,属性A,属性B分别是我查询得两个字段,然后这个List数据就可以直接给页面table去渲染,但是echarts要得数据却是属性A的List<Double> 和属性B的List<Double>.目前,我的处理方式是得到去遍历Data,取出每一个Map,得到A和B添加到各自的List中。这样我就只用查询一次数据库就可以了,但是我发现这样的方法在数据量越多时,效率越低。我试验了一下,直接在数据库中查询,1660条数据,只用了10ms,但是,通过页面请求,得到结果再遍历再返回页面,花了近300ms,去除网速的因素,也有20多倍的差距。
不懂就问,小伙伴们有这种需求经历吗?你们是怎么加快这种响应的?多次查询吗?
典型的前后端交互问题,有以下建议:
1、后台发回来的数据,最好是直接赋值就能使用的,不需要处理的。比如这个你可能数据重构为‘ A的List<Double> 和B的List<Double>. ’之后,A,B正常显示了。但是一番操作你又要发回后台,就得把数据格式整理为 “ List<Map<String,Object>> ”。同一数据,要是页面交互频繁,代码繁琐,维护的人就哭了
2、既然你说了请求只用10ms,数据复杂的情况下可以拆分多个请求啊。没必要一次性整个页面全部加载。
3、数组的循环尽量别用 for forEach 遍历然后 找到DOM元素,操作实体DOM最费内存。js除了操作元素之外,就是循环最费内存,不慢才怪。ES6不是更新好久了么。filter ,map 不都挺好用的,建议看一看
真的不建议前端做数据重构格式,实在不行,你请人吃顿饭把,,后端真的是大哥哇。。