Client Side Data Storage

Question

I am building a page, which depending on a date range, displays between 0 and a couple hundred rows. When the user enters the page it loads all rows and displays them, the user can then filter the data to his needs. This seems reasonable fast in chrome but IE8 becomes quite slow at some point. (Unfortunately IE8 is the Browser that counts)

Say I need the entire data at page load, but only want to display a subset. Whats the best way to do that?

1.) Build a DOM String and add only the needed rows to the "real" DOM.
2.) Save the data in localStorage.
3.) Take the needed data from the Server produced JSON Object.
4.) ???

Or is it always better to hit the server with a specified query and return only the needed data?

Answer 1

On page load render all the rows in the DOM and print the necessary fields of the data in JSON array. When filter criteria changes, filter the data in JSON, and then using the unique identifiers in JSON hide the rows in the table (only hide, not remove). This way You wont have to rerender existing rows.

If You choose the ajax way though, the fastest way is to render the HTML on the server side, then simply replace the content of the table with it. This way the browser renders the representation from the given string, u dont have to iterate through a JSON array and render it one by one. Its drawback maybe the network latency and bandwidth. Hope it helps decide