Make More Server calls OR load all Data from server at once?

Question

This is a performance related question .

I have a requirement to show all the orders made by the Customer during that Day (Max Orders can be of 10)

And the screen looks this way ??

Right now on click of the Order Row i am making a Ajax call , getting the data from the server and showing it on Front End .

And the end result looks this way

I am thinking of other approach , which is during page start (document ready ) up load all data related to that customer for that day , store it in a variable in a javascript (global level array). and during click of the order row show the data by looping the array ??

Could anybody please tell me what is the best approach ??

Answer 1

If you know that everyone opening that page will go ahead and toggle all the rows then go ahead and preload everything. Otherwise it is much better to load only the data you need, thus make small ajax calls when the user requests data for a specific row.

Answer 2

The answer will depend on the specifics of your application, and how it is used.

How expensive is it to obtain the full list of orders? How often does a user need to see all the orders? Will your users tolerate short pauses while retrieving data from the server, or are they more likely to complain about page load time?

Neither approach is always better or worse, it just depends.