纯前端10万+数据量二维表格-实现翻页加载数据效果

403 阅读2分钟

在报表设计过程有时候会遇到大数据量的报表展示,那么对于大数据量的报表展示,如果一次性把所有数据加载到页面上,那势必会造成页面卡顿、反应慢等性能问题。那么对于这种大数据量的报表展示我们如何该做性能优化呢?

一、问题背景

前端性能优化一直是一个比较大的话题,实际项目中可能会遇到很多关于性能的问题,常见的优化手法也很多,比如合并JS/CSS文件、减少http请求、懒加载、图片压缩等。在这里我们只聚焦于当数据量比较大的时候,我们该如何去做性能优化。假如后端的小哥哥小姐姐们将几万条数据丢给前端,我们拿到之后该怎么做呢?其实核心思想就是分段去展示数据!每次只加载可视区域的报表数据,当翻到下一页时再取下一页的数据进行展示。这样每次报表渲染的时候,只会渲染当页可见的dom元素,不会一次性把几万行报表数据渲染加载到页面上。

二、优化实战

那么落到实际该怎么做呢?这里我就以ActiveReports JS纯前端报表控件为例,来看一下在AR JS中如何展示大数据量报表。

1、自定义报表翻页按钮 分页加载报表数据,首先要自定义翻页按钮,当点击到下一页时,再去加载下一页的数据。ARJS提供了自定义翻页按钮的功能,所以这里先添加自定义按钮:

const prevPageButton = {
      key: '$prevPageButton',
      text: "上一页",
      title: "prevPageButton",
      enabled: true,
      action: function () {}
};
const nextPageButton = {
      key: '$nextPageButton',
      text: "下一页",
      title: "nextPageButton",
      enabled: true,
      action: function () {}
};
const pageCount = {
      key: '$pageCount',
      text: `1/ ${totalPage}`,
      title: "pageCount",
      enabled: true
};

这里我定义了三个按钮,分别为“上一页”、“当前页”、“下一页”,其中“当前页”在翻页过程中会不断计算更新页面展示。然后将几个按钮要添加到ARJS 的viewer对象上:

 viewer = this.$refs.reportViewer.Viewer();
this.designerHidden = true;
[ prevPageButton, pageCount, nextPageButton ].forEach((item) => {
      viewer.toolbar.addItem(item);
})
viewer.toolbar.updateLayout({default: ["$zoom", "$split", "$print","$prevPageButton", "$pageCount", "$nextPageButton"]});

api的使用部分不再赘述,可以参考帮助文档:demo.grapecity.com.cn/activerepor…

2、分页展示数据

自定义按钮之后我们就需要去实现如何分页取数据,只展示当页数据。我们需要提前计算好每页能够展示多少条数据,比如我这里每页展示29条数据,所以每次从后端数据中取出29条数据来传给报表展示:

let currentPage  = 1;
//每页展示的数据条数
let once = 29;
//计算需要展示的总页数
const totalPage = salesData.length % once ? Math.floor(salesData.length / once) + 1 : Math.floor(salesData.length / once);

初始预览时,传给报表前29条数据:

openReportView(salesData.slice(0, 29));

function openReportView(data) {
      definition.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
      viewer.open(definition);
}

在翻页时再判断逻辑,将数据分段传给报表文件,这里逻辑需要定义在之前定义的button提供的action接口中,同时定义好翻页数据逻辑之后,我们也需要更新当前页的展示:

 const prevPageButton = {
      key: '$prevPageButton',
      text: "上一页",
      title: "prevPageButton",
      enabled: true,
      action: function () {
        if(currentPage === 1) {
          return null;
        } else {
          currentPage --;
          let data = salesData.slice((currentPage-1) * once, currentPage * once);
          openReportView(data);
          pageCount.onUpdate([], pageCount);
        }
      }
    };
    const nextPageButton = {
      key: '$nextPageButton',
      text: "下一页",
      title: "nextPageButton",
      enabled: true,
      //action接口中实现更新每次展示的数据逻辑
      action: function () {
        if(currentPage === totalPage) {
          return null;
        } else  {
          currentPage ++;
          let data = currentPage === totalPage ? salesData.slice((currentPage-1) * once, salesData.length) : salesData.slice((currentPage-1) * once, currentPage * once);
          openReportView(data);
          //调用更新展示当前页号的逻辑
          pageCount.onUpdate([], pageCount);
        }
      }
    };
    const pageCount = {
      key: '$pageCount',
      text: `1/ ${totalPage}`,
      title: "pageCount",
      enabled: true,
      //实现更新页号的逻辑
      onUpdate: function (args, currentItem) {
        currentItem.text = `${currentPage}/${totalPage}`;
      }
    };

三、效果对比

至此我们分页展示大数据量报表的逻辑就已经实现完成了。让我们来对比看看效果吧!

未分页展示数据前:

image.png

分页展示数据:

image.png

可以看到上方两个GIF图有明显的对比,未分页前点击预览之后有两秒左右的空白加载时间,而分页之后,点击预览数据立刻呈现出来了。这里我的测试数据有一万多行,那么当后端传回的数据超过一万或者更多时,前期加载时间会更多,此时这种分页加载的方式就十分有用,更快的让数据呈现在用户眼前。