问题
I'm trying to use html tables to show large quantities of data. In my case a matrix of 260 columns and 117 rows.
jQuery/Ajax is used to get the data. And DataTables + Scroller to show it all. The browser freezes for a number of seconds to render it all. Which I think is only normal - regarding the single-threaded nature of javascript.
Unfortunately, once it is rendered, the browser is still in trouble. The response becomes very sluggish. Resizing the window, popping up dev tools, etc... Presumable because it runs the rendering process again ? Or maybe the memory consumption goes through the roof ? I have no clue.
Scroller is used because there are many more rows to come. Which works beautifully with a modest number of columns. It only fetches and shows the visible rows. In practice there is no limit to the rows. Alas, this is not the case for the columns. They are always all included.
Does somebody know how to apply the same trick "horizontally" ? By only including the visible columns into the DOM ?
UPDATE
I've prepared an example on JSFiddle: url to code
Why does SO need code ?
First press "Add Big table" and then "Fill table". Wait for a few seconds to see the table appear. The spent time is displayed too. The "render" time is basically the duration of the DT call. The "build" time is the time spent to create the whole thing - apart from calling DT.
The styling of the result is not really what we have here - but the intended result is there: Showing it takes 4/5s to render it. I'm no JS/CSS/... guru; hence my call for help to find out what's going on.
To "simulate" the server, the DT settings object is converted into a string and then back into a JSON object. And only then fed to DT.
Is there something obvious I can try to make this process go faster ?
回答1:
The data-tables plugin is so responsive because it tries loading all data first and then you can sort/search as needed.What we can and should do in case of large datasets is to load as much data as can be handled in one view and then on click of a link or button load the next view. For a large number of rows it is fairly obvious to implement pages. [For those that use LINQ, this can be done by using Skip (pagesize(n)) and Take (pagesize).]
This is called pagination and can be enabled automatically via the jQuery data-tables API. This along with server-side processing will vastly increase the performance of any jQuery data-table.
For a large number of columns, also load only say 10 columns that fit in your view and then show a link to load more. When the link is clicked, load the next 10 columns. Keep a count of how many times it has been clicked, this will help you to understand how many columns to skip.
For more information on server side processing see http://datatables.net/release-datatables/examples/data_sources/server_side.html
回答2:
For large data-sets, I've found myself forced to use divs instead of table markup.
Several reasons why browsers can handle these better, mainly the entire table needs to be calculated before rendering.
回答3:
first hide the page after putting data in table and than show it using setTimeout function. I don't know that it will work or not in your app but it's working in my app..
ex
$("yourId").hide();
setTimeout(function(){
$("yourId").show();
},10),
May be it will work for you.
回答4:
Since you've a lot of columns, table-layout: fixed would probably be helpful.
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
来源：https://stackoverflow.com/questions/22905565/performance-issue-rendering-large-tables