An efficient way to display a lot of information in Javascript
I am constantly taking a list (over 200) of records from a remote server and displaying them in a table (many pieces of data per row). Data changes and changes over time. What's the most efficient way in JS to do this on screen. As the data changes, I simply destroy the DOM and re-process the new data; is there a list of ids that will just update the correct tr dom entries?
It's already sorted and filtered to be correct information (server side), so it just displays it to the user I'm linked to.
Any suggestions would be helpful. I am using jQuery for my queries, but this can be changed. I need to know the fastest (latent) way to pull this large dataset and display it in tabular format.
Edit: pagination is not possible in this scenario.
Edit2: The backend is Python (WSGI) running in a load balancer and capable of flushing 600 reqs / second. The data is only available as JSON and the backend is more of an API.
source to share
Are you using HTML tables? Sometime ago, I crossed the Microsoft blog from the IE team that stated that render tables are slow. So slow. Re-rendering the entire table each time will probably be slower than updating its values, but that's just my guess.
In fact, my opinion here is that refresh values will be faster than re-rendered items on the page. To optimize latency, you can keep a hash of the mapped objects, so you don't have to search the DOM every time you update the values.
source to share
If your list of data is getting really big, consider displaying all of that data to the user at the same time (if possible in your situation). Not only will the user get lost looking at so much data, but the browser will have to display the entire list and slow down.
You didn't mention which server side technology you are using. If you are on .Net, there are several ASP.Net controls that use a data pager (like a grid view). There is also a PagedDataSource object that you can use in use (which can be used with any ASP.Net control that has a DataSource property). Both will paginate your data and only the page being viewed will be rendered at a time. This significantly reduces the waiting time.
source to share