呈现大型表格的性能问题 [英] Performance issue rendering large tables
问题描述
我正在尝试使用html表显示大量数据.在我的情况下，矩阵为260列和117行.
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用于获取数据.以及DataTables + Scroller来显示所有内容.浏览器冻结了几秒钟以呈现所有内容.我认为这只是正常现象-关于javascript的单线程性质.
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是因为还有很多行.适度的列数可以很好地工作.它仅获取并显示可见行.实际上，行数没有限制. las，列的情况并非如此.它们始终都包含在内.
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.
有人知道如何水平"应用相同的技巧吗?通过仅将可见列包括到DOM中?
Does somebody know how to apply the same trick "horizontally" ? By only including the visible columns into the DOM ?
更新
我已经在JSFiddle上准备了一个示例:网址为代码
I've prepared an example on JSFiddle: url to code
Why does SO need code ?
首先按添加大表"，然后按填充表".等待几秒钟以查看该表的出现.花费的时间也会显示. 渲染"时间基本上是DT通话的持续时间. 构建"时间是指用来创建整个内容的时间-除了调用DT之外.
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.
结果的样式并不是我们在这里真正拥有的-但是预期的结果在那里:显示它需要4/5s来呈现它.我不是JS/CSS/...大师；因此，我呼吁寻求帮助，以了解发生了什么情况.
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.
要模拟"服务器，DT设置对象将转换为字符串，然后再转换为JSON对象.然后才喂给DT.
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 ?
推荐答案
data-tables插件的响应速度非常快，因为它首先尝试加载所有数据，然后您可以根据需要进行排序/搜索.大型数据集的加载量是在一个视图中加载尽可能多的数据，然后单击链接或按钮时加载下一个视图.对于大量的行，实现页面是相当明显的. [对于使用LINQ的用户，可以通过使用Skip(pagesize(n))和Take(pagesize)来完成.]
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).]
这称为分页，可以通过jQuery数据表API自动启用.加上服务器端处理，将大大提高任何jQuery数据表的性能.
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.
对于大量列，请仅加载说适合您视图的10列，然后显示一个链接以加载更多列.单击链接后，加载接下来的10列.记录一下它被单击了多少次，这将帮助您了解要跳过的列数.
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.
有关服务器端处理的更多信息，请参见 http://datatables.net/release-datatables/examples/data_sources/server_side.html
For more information on server side processing see http://datatables.net/release-datatables/examples/data_sources/server_side.html
这篇关于呈现大型表格的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
