纯前端100000+数据量的二维表——实现翻页加载数据的效果页面加载数据时，难免会造成页面卡顿、响应慢等性能问题。那么对于这种数据量很大的报表展示我们应该如何做性能优化呢？一、问题背景前端性能优化一直是一个比较大的话题。在实际项目中，可能会遇到很多性能问题。常见的优化方法也有很多，比如合并JS/CSS文件、减少http请求、懒加载、图片压缩等，这里只关注数据量比较大的时候如何优化性能。如果后端的小哥哥小姐姐把几万条数据丢给前端，我们拿到之后怎么办呢？其实核心思想就是分段展示数据！每次只加载可见区域的报表数据，翻到下一页时，再取下一页的数据显示。这样每次渲染报表时，只会渲染当前页面可见的dom元素，而不会一次性渲染加载到页面上的几万行报表数据。2、实战中的优化那么在实战中我们应该怎么做呢？这里我以ActiveReportsJS纯前端报表控件为例，看看如何在ARJS中展示大数据量的报表。1、自定义报表翻页按钮，实现分页加载报表数据。首先，您需要自定义翻页按钮。当点击下一页时，再加载下一页的数据。ARJS提供了自定义翻页按钮的功能，所以这里先添加一个自定义按钮：){}};constnextPageButton={key:'$nextPageButton',text:"NextPage",title:"nextPageButton",enabled:true,action:function(){}};constpageCount={key:'$pageCount',text:`1/${totalPage}`,title:"pageCount",enabled:true};这里我定义了三个按钮，分别是“上一页”、“当前页”、“下一页”，其中“当前页”会在翻页过程中不断计算更新页面显示。然后向ARJS查看器对象添加几个按钮：(item);})viewer.toolbar.updateLayout({default:["$zoom","$split","$print","$prevPageButton","$pageCount","$nextPageButton"]});api的使用部分就不详细介绍了，可以参考帮助文档：https://demo.grapecity.com.cn/activereportsjs/docs/GettingStarted/ResourceGuid2，分页显示数据自定义按钮后，我们需要实现如何分页Fetch数据，只显示当前页面数据。我们需要提前计算好每页可以显示多少条数据。比如我这里每页显示29条数据，那么每次从后台数据中取29条数据传给报表显示：letcurrentPage=1;//每页显示的数据条数letonce=29;//计算总显示页数consttotalPage=salesData.length%once?Math.floor(salesData.length/once)+1:Math.floor(salesData.length/once);在初始预览时，将前29条数据传递给报表：openReportView(salesData.slice(0,29));functionopenReportView(data){definition.DataSources[0].ConnectionProperties.ConnectString="jsondata="+JSON。字符串化（数据）；viewer.open(definition);}翻页时，再次判断逻辑，将数据分段传给报表文件。这里需要在之前定义的按钮提供的action接口中定义逻辑，同时定义翻页数据逻辑后，我们还需要更新当前页面的显示：constprevPageButton={key:'$prevPageButton',text:"PrevPage",title:"prevPageButton",enabled:true,action:function(){if(currentPage===1){returnnull;}else{currentPage--;让数据=salesData.slice((currentPage-1)*once,currentPage*once);打开报表视图（数据）；pageCount.onUpdate([],pageCount);}}}};constnextPageButton={key:'$nextPageButton',text:"NextPage",title:"nextPageButton",enabled:true,//action接口实现更新每个显示action的数据逻辑：function(){if(currentPage===totalPage){返回null;}else{当前页面++;让data=currentPage===totalPage？销售数据。slice((currentPage-1)*once,thles.salesData.le(currentPage-1)*once,currentPage*once);打开报表视图（数据）；//调用当前页码更新显示逻辑pageCount.onUpdate([],pageCount);}}}};'constpageCount={pageCount',text:`1/${totalPage}`,title:"pageCount",enabled:true,//实现更新页码的逻辑onUpdate:function(args,currentItem){currentItem.text=`$}{currentPage/${totalPage}`;}};3、效果对比至此，实现了分页展示大数据量报表的逻辑。来对比一下看看效果吧！不分页显示数据前：分页显示数据：可以看到上面两张GIF有明显的对比。分页前，点击预览后有两秒左右的空白加载时间，但分页后，立即显示预览数据。这里我有10000多行测试数据，所以当后端返回的数据超过10000或者更多的时候，前期的加载时间会比较长。数据呈现在用户眼前。
