I have a Web app that has a ton of controls due to its spreadsheet-like format. It presents the user with essentially 4 spreadsheets, each with 8 columns, and each with anywhere from 3 to 8 rows (a total of 24 rows altogether). It’s very efficient for users, as they just swipe up and down to fill in cells on their smartphone. Each cell in the 8th column recalculates its row total each time the user moves from cell to cell in that row. It’s very efficient, even on a slow connection.
But it has so many controls (over 160 cells in the spreadsheet sections), I think it should be optimized so that less controls are drawn each time the user starts a session. I was thinking of decreasing the rows. Say I cut it down from 24 rows to 12, and dynamically make them visible based on the section the user chooses via a button, and populate them based on that button push? This way the same 12 rows are recycled with data. The data can be held in a Dictionary that initially loads its data from the existing database file, and each button push can grab the appropriate data from the Dictionary and feed the recycled controls with them, making some rows invisible when appropriate.
Would this actually decrease throughput? Or will each recycled control still get redrawn with each button press, in virtue of new data appearing in it? I know the new data will pass from server to client, but I was thinking that since the control itself doesn’t change, the throughput is less affected than if a different control is used. I also wonder if making a control visible after the previous button press made it invisible, is as expensive as simply displaying another control.
I hope this is clear. I wasn’t sure how to describe it.