I’m building a website for work, and one of the more important features is a rich content grid displaying data. By default, it only displays 20 items per page, but we have ~200 items in the database that can be filtered, sorted, and searched.
Our sales and marketing team has also requests a “list all” feature so they can display all of the data in one place and scroll through rather than page through the data.
This entire system is built using ASP.Net MVC on the server side, jQuery and Flexigrid on the client side, and uses JSON to exchange data between the two via AJAX.
I’ve gotten the actual data transfer part pretty solid. A page of 20 results takes 800ms for the entire request (POST a request to the server via Flexigrid and get the response). It’s more the client-side processing that takes a while.
I could offload some of the client-side processing to the server. But this would make the server-side operation take longer and make the size of the document returned that much larger. Not a problem in situations with a high-speed Internet connection … but that’s not necessarily the case.
The other option I have is to download as much data as possible and shift the majority of the data processing to the client. This cuts the request time down to basically nil (only fetching changed elements rather than the entire data set). It will work pretty well on machines with fast CPUs and a lot of RAM, but that’s not necessarily the case, either.
Since at least one person flagged this as “not a real question,” let me clarify …
- What can I possibly do to alleviate the client-side processing time issues without moving so much processing to the server that I end up with a data transfer time issue?
- What are some best practices when it comes to balancing client-side processing with server-side processing?
- Is it better to err on the side of the server or the client?
- What are some tools I can use to better optimize these exchanges so that things don’t continue to go awry?
What are you processing on the client side that is taking so long? Processing a JSON object (even a very large one) should not be too intensive.
A lot of DOM look ups when writing your data client side could slow things down. Reducing DOM lookups can greatly help performance. I believe good practice for balancing server & client side processing is to error on the server. Since the server is under your control you can always choose to upgrade your server. Keeping the majority of processing on the server will also make things easier for mobile devices and older computers.
You should utilize AJAX & client side capabilities in a way that enhances the user experience. Load and process data as it is requested by the users. By loading only what they request you can decrease the load on your server & client.
If you are also requesting the same sort of data over and over you can look in to both server & client side caching. By utilizing caching you can reduce request times and/or bandwidth.