DMap(谛听)——实战Vue百万条数据渲染表格组件开发

      近几个月在开发一个基于Vue的数据可视化分析辅助应用———DMap(谛听)，一套为数据分析师和数据科学家提供的基于位置大数据分析的工具，旨在提升数据分析效率，下降获取多数据并行分析成本，简化大屏和数据报告开发制做流程。UI组件使用的是iView，地图可视化库使用的是inMap，服务端使用Node.js搭建。

      DMap的核心就是服务大数据分析，因此当面对几万几十万甚至百万级别的数据时，性能优化是一个具备挑战性的问题。今天我就拿项目中一个表格渲染的优化为例来展开介绍。

      在前端开发中，用表格来展现数据是再日常不过的了，当数据量较多时，咱们一般的作法是使用分页，若是数据量不算太多只有两三页，咱们大能够把全量数据获取下来，在前端作简单的分页展现。当数据量再上一个等级时，咱们就须要根据页数向服务端请求这一页须要的数据。可是DMap做为助力大数据可视化的分析工具，咱们须要将全量的数据在前端作展现，而为了提高用户体验，咱们在表格的展现上决定不作分页，也不作懒加载，而是像Excel那样能够无缝隙的滚动。

      在Web中，长列表渲染的性能问题已经有一些成熟的方案，表格和长列表类似，当渲染的行数达到必定量时，滚动就会变得卡顿，因此咱们使用了虚拟渲染的方案，就是只渲染用户所能看到的区域的一小部分数据，而后经过滚动来计算显示的数据，和上下占位元素的高度。

      经过这个图能够对原理有个大概的了解，接下来讲下计算上的细节。

      首先咱们须要监听表格外层容器（也就是显示滚动条的元素）的scroll事件，在scroll事件绑定的方法中咱们只作一件事，那就是获取外层容器当前滚动了的高度scrollTop的值。咱们的全部计算，包括三个表格位置的替换、表格数据的选取、上下占位元素的高度的计算都与scrollTop相关。

      下面是scroll事件的绑定的方法：

handleScroll (e) {
      const ele = e.srcElement || e.target;
      const { scrollTop, scrollLeft } = ele;
      this.scrollLeft = scrollLeft;
      this.scrollTop = scrollTop;
    }
复制代码

      咱们只须要在这里把scrollTop和scrollLeft的值赋给vue实例对应的值，而后咱们用watch监听scrollTop的改变，若是更新了，就来计算当前处于可视区域的表格索引号currentIndex：

this.currentIndex = parseInt((top % (this.moduleHeight * 3)) / this.moduleHeight);
复制代码

      这的top就是更新后的this.scrollTop的值，moduleHeight是单个表格的高度，咱们称它为一个模块。

      拿到currentIndex的值后，咱们就能够计算三个表格的显示位置，和每一个表格中填充的数据。三个表格咱们是经过render函数渲染的，咱们根据currentIndex的值来返回不一样顺序的render函数：

getTables (h) {
	let table1 = this.getItemTable(h, this.table1Data, 1);
	let table2 = this.getItemTable(h, this.table2Data, 2);
	let table3 = this.getItemTable(h, this.table3Data, 3);
	if (this.currentIndex === 0) return [table1, table2, table3];
	else if (this.currentIndex === 1) return [table2, table3, table1];
	else return [table3, table1, table2];
}
复制代码

      数组中表格顺序不一样，反应在页面上的效果就是不一样的前后顺序。最后咱们经过这个方法获得完整的render：

renderTable (h) {
      return h('div', {
        style: this.tableWidthStyles
      }, this.getTables(h));
    }
复制代码

      而后使用封装的无状态的组件，来渲染咱们获得的表格render。

<render-dom :render="renderTable"></render-dom>
复制代码

      renderDom组件的实现以下：

export default {
  name: 'RenderCell',
  functional: true,
  props: {
    render: Function,
    backValue: [Number, Object]
  },
  render: (h, ctx) => {
    return ctx.props.render(h, ctx.props.backValue, ctx.parent);
  }
};
复制代码

      接下来咱们讲下三个表格中填充的数据的计算。

      咱们按照三个模块都在可视区域通过一次算是一轮，经过scrollTop来和currentIndex来计算每一个模块当前是在第几轮展现，但由于咱们是从第二个表格才开始作这个逻辑的处理（为了轮播效果更平滑），因此要先判断当前滚动的高度是否大于一个模块的高度，若是大于才作以下计算：

switch (this.currentIndex) {
   case 0: t0 = parseInt(scrollTop / (this.moduleHeight * 3)); t1 = t2 = t0; break;
   case 1: t1 = parseInt((scrollTop - this.moduleHeight) / (this.moduleHeight * 3)); t0 = t1 + 1; t2 = t1; break;
   case 2: t2 = parseInt((scrollTop - this.moduleHeight * 2) / (this.moduleHeight * 3)); t0 = t1 = t2 + 1;
}
复制代码

      计算出每一个模块在第几轮展现后，就能够来取对应的表格数据了：

const count1 = this.times0 * this.itemNum * 3;
this.table1Data = this.insideTableData.slice(count1, count1 + this.itemNum);
const count2 = this.times1 * this.itemNum * 3;
this.table2Data = this.insideTableData.slice(count2 + this.itemNum, count2 + this.itemNum * 2);
const count3 = this.times2 * this.itemNum * 3;
this.table3Data = this.insideTableData.slice(count3 + this.itemNum * 2, count3 + this.itemNum * 3);
复制代码

      到这里虚拟渲染的重要内容都介绍完了。表格开发完成后，在项目中实际使用时，当加载二十多万条数据来测试时，整个页面卡的让人没法忍受，数据量越大页面卡顿越严重。咱们的表格是没有问题的，问题出在Vue帮了咱们“倒忙”。

      在Vue实例中添加的对象，Vue会先遍历一遍对象的全部属性，用Object.defineProperty()为每一个对象建立对应的getter和setter。而在项目中，咱们的insideTableData只是一个数据集对象中的一个属性，这个对象还包括不少与这一个数据集相关的信息，咱们在使用this.insideTableData.slice获取数据的时候会触发this.insideTableData对应的getter，从而执行一些其余逻辑，而咱们的滚动又会频繁的（仅当currentIndex变化的时候）须要从新填充表格数据，因此这会形成卡顿。

      解决这个问题的办法就是阻止Vue给咱们的数据集对象设置对应的setter和getter，个人方法就是使用ES5的Object.preventExtensions在将数据集对象交给Vue实例代理前将对象密封，这样数据集对象就变成了不可拓展的了，Vue就不会再添加新的属性了，也就没法设置setter和getter了。

      作了这个处理后渲染几十万数据跟玩儿似的流畅。可是阻止Vue设置getter和setter也形成了一些问题，好比原来表格组件中的一些依赖于表格数据的计算属性，如今没法在表格数据变化时从新计算，固然了，影响不大，就一个表格行数的计算，因此改为了手动设置这个值。

      到这里要讲的差很少了，这只是项目中的一点优化内容，我封装的vue-bigdata-table（没办法，好名字都被注册了）表格组件不只仅这点功能，目前还包括拖动修改列宽、固定列不横向滚动，固定表头、内置排序、编辑单元格、粘贴、筛选、自定义表头和单元格等功能。如今也已经开源了，可是还有不少功能还在开发中。

      想玩儿转Vue技术栈开发，从建立项目开始，到项目部署上线，能够看个人最新视频教程：《Vue技术栈开发实战》。

      Github连接：github.com/lison16/vue…

欢迎Star。