优化十万条数据量卡顿问题

高志小鹏鹏
1,019 阅读3分钟

首先，小编声明一下： JS是单线程工作的，不适合做大量的密集型工作。要求前端一次性处理上万条数据，或者几M的数据量，本身就是不合理的

需求虽然不合理，但客户强烈要求如此。吐槽归吐槽，还是要接下这个任务。历经千辛万苦，终于满足了甲方爸爸的要求。写下此篇，一起来分享一下。

json

  1. 后端将JSON压缩成字符串，可以大大减少体积
  2. 在不影响效果的情况下，进行数据过滤（如： 热力图坐标， 国家、城市边界点...）

echarts

1. heatmap

需求：将IOT的坐标点，绘制成热点图展示

初版：客户查询3个月的数据时，数据量就达到了5M+，导致页面直接卡死。责令我们一个周进行优化，gg

一版(后端优化)：后端将json整理成字符串，并去除了无效的字段。

经测试后，数据直接从5M优化成3M。性能大大提升。

二版(后端优化)：根据时间过滤坐标点（一个周 / 5， 一个月 / 20， 3个月 / 50， 一年 / 100，然后向下取整）然后将心跳的坐标点（我司是一个小时一次心跳）过滤，每隔5个点，取一次。即取第1个点，第6个点...

经测试后，数据直接从3M优化成200K左右。性能飞起

二版（前端优化）：不要将chart实例放在data中。声明一个全局变量去接收echart即可

<script>
let chart = null

export default {
    mounted () {
          chart = echarts.init(this.$ref.chart)
    }
    beforeDestroy () {
          if (chart) {
              return
          }
          chart.dispose()
          chart = null
    }
}
</script>

经测试后，时间从5s下降到3.5s。性能显著提升

3天搞定甲方爸爸的需求，上线交付

...

2年过去了，客户想看1年的热力图～～～。页面展示直接10s+，客户要求再次优化

立项后，坐标点过滤的方法不在适合当前需求了。于是再次优化

三版（后端优化）：开启job计算每天的坐标点总数，同时配合坐标点过滤。数据为：

{
    "coord": [
        120.14322240845,
        30.236064370321
    ],
    "elevation": 21
}

经测试后，时间从10s下降到2s。性能飞起

dom

dom是最耗费浏览器资源的，如果后台直接返回几W条数据，页面直接渲染会非常卡顿，甚至直接卡死。

优化dom卡顿问题的原理

根据浏览器的高度和宽度，通过滚动函数节流实现滚动后事件来动态渲染数据，减少对DOM节点的渲染。

1. table

使用umy-ui: www.umyui.com/umycomponen… 解决table表格的大数据问题

umy-ui.jpg

elementui的样式要写在umy的后面，才能覆盖umy的样式

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css'

import Element from 'element-ui'

Vue.use(UmyUi)
Vue.use(Element, {
  size: Cookies.get('size') || 'mini', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

2. list

使用vue-virtual-scroller: www.npmjs.com/package/vue… 插件解决dom加载问题

<virtual-list 
  style="height: 500px; overflow-y: auto;" // make list scrollable
  :data-key="'id'"
  :data-sources="items"
  :data-component="itemComponent"
/>
  1. 必须要设定高度
  2. 删除dom需要调用一下reset()方法

文件

文件上传

前端直接将文件扔给后端，由后端计算，生成数据

文件下载

前端调用后端接口，由后端计算数据，生成文件，然后下载

Woker

使用Web Worker

vue-worker插件集成了web worker: www.npmjs.com/package/vue… 的api。方便使用

小编没有使用过worker的场景，暂不过多介绍。有兴趣的码友可以自行多了解一下哈

avatar
文章
阅读
粉丝