In the process of report design, we sometimes encounter report display with large amount of data , So for report presentation with large amount of data , If you load all the data on the page at once , That is bound to cause page jam 、 Slow response and other performance problems . So how can we optimize the performance of such a large amount of data report ？
One 、 The problem background
Front end performance optimization has always been a big topic , There may be many performance problems in the actual project , There are many common optimization methods , Like mergers JS/CSS file 、 Reduce http request 、 Lazy loading 、 Image compression, etc . Here we only focus on when the amount of data is large , How do we optimize performance . If the little brothers and sisters in the back end throw tens of thousands of data to the front end , What should we do when we get it ？ In fact, the core idea is to display the data in segments ！ Only the report data of the visual area is loaded at a time , When turning to the next page, take the data of the next page for display . So every time the report is rendered , Will only render when the page is visible dom Elements , Tens of thousands of rows of report data will not be rendered and loaded on the page at one time .
Two 、 Optimize the actual battle
So what should we do when it comes to reality ？ Here I will ActiveReports JS Pure front-end report control as an example , Take a look at AR JS How to display a large amount of data report in .
1、 Custom report page turning button
Page loading report data , First, customize the page turning button , When you click to the next page , Then load the data of the next page .ARJS Provides the function of customizing the page turning button , So first add a custom button ：
const prevPageButton = {
key: '$prevPageButton',
text: " The previous page ",
title: "prevPageButton",
enabled: true,
action: function () {}
};
const nextPageButton = {
key: '$nextPageButton',
text: " The next page ",
title: "nextPageButton",
enabled: true,
action: function () {}
};
const pageCount = {
key: '$pageCount',
text: `1/ ${totalPage}`,
title: "pageCount",
enabled: true
};Here I define three buttons , Respectively “ The previous page ”、“ The current page ”、“ The next page ”, among “ The current page ” In the process of page turning, the page display will be continuously calculated and updated . Then add a few buttons to ARJS Of viewer On the object ：
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 I will not repeat the use of , You can refer to the help documentation ：https://demo.grapecity.com.cn/activereportsjs/docs/GettingStarted/ResourceGuid
2、 Display data in pages
After customizing the button, we need to realize how to page and fetch data , Show only the current page data . We need to calculate in advance how many pieces of data can be displayed on each page , For example, I show every page here 29 Data , So every time you take it out of the back-end data 29 A piece of data is passed to the report display ：
let currentPage = 1;
// Number of data pieces displayed per page
let once = 29;
// Calculate the total number of pages to display
const totalPage = salesData.length % once ? Math.floor(salesData.length / once) + 1 : Math.floor(salesData.length / once);Initial preview , Before sending to the report 29 Data ：
openReportView(salesData.slice(0, 29));
function openReportView(data) {
definition.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
viewer.open(definition);
}Judge the logic when turning the page , Transfer data segments to the report file , The logic here needs to be defined in the previously defined button Provided action Interface , At the same time, after defining the page turning data logic , We also need to update the display of the current page ：
const prevPageButton = {
key: '$prevPageButton',
text: " The previous page ",
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: " The next page ",
title: "nextPageButton",
enabled: true,
//action Interface to update the data logic displayed each time
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);
// Call the logic to update the display of the current page number
pageCount.onUpdate([], pageCount);
}
}
};
const pageCount = {
key: '$pageCount',
text: `1/ ${totalPage}`,
title: "pageCount",
enabled: true,
// Realize the logic of updating page number
onUpdate: function (args, currentItem) {
currentItem.text = `${currentPage}/${totalPage}`;
}
};3、 ... and 、 Effect comparison
So far, the logic of displaying large data reports in pages has been completed . Let's compare the results ！
Before paginated display of data ：
Display data in pages ：
You can see the top two GIF There is a clear contrast , Before paging, click preview and there will be about two seconds of blank loading time , And after paging , Click preview and the data will be displayed immediately . Here I have more than 10000 lines of test data , So when the data returned from the back end exceeds 10000 or more , The pre loading time will be more , At this point, this paging loading method is very useful , Faster data presentation in front of users .
