0

我正在使用 ajax 调用来获取 json 数据。数据包含大小为 10000 的数组。

data.LocationQuality.forEach(function(datum){
}

我正在使用这个循环遍历所有元素并创建 tr 并使用基准填充所有 td。

我面临的问题是由于大量数据。循环需要大量时间，最终浏览器显示没有响应，我必须终止页面。

如何解决这个问题呢？

4

4 回答 4

2

这里有几件事要说。

首先，如前所述，分页肯定是最好的解决方案。在内存中保留 10000 行对于现在的浏览器来说不是问题，但是在表中显示 10000 行通常确实需要很长时间。例如，一次只显示 20 行，速度要慢得多。

像 jqGrid 这样的解决方案不需要 ajax（但确实支持它）。您可以加载一次数据，网格会将数据保存在内存中，并且一次只显示多个项目，并带有导航按钮来翻阅页面。

你可以在这里得到它：http ://www.trirand.com/blog/?page_id=6

其次，关于 dom 应该说点什么。我希望您目前正在向 dom 添加一行 10000 次。这比在内存中构建表，然后一步添加一张 10000 行的表要慢得多。它仍然会很慢，但不会像多次访问 dom 那样慢。

所以而不是

$.each(data, function (index, row) {
    $('#yourTable').append('your row definition'); // hitting the dom for each row
}

改为这样做

var table = $('<table></table>');
$.each(data, function (index, row) {
    table.append('your row definition'); // adding it to the table in memory
}
$('#yourTable').replace(table); // hit the dom once
于 2013-06-14T08:18:32.477 回答
0

您在显示大量数据时遇到问题，并且无法在多个查询中获取数据？

因此，在一次调用中获取所有数据，解析它们并放入数组中，并使用该“本地”数组进行分页。

无需从服务器请求数据进行分页，只需从“本地”数组获取数据。

于 2013-06-14T08:29:51.857 回答
0

没有代码，这是在黑暗中刺伤：

1：优化你的页面创建循环。DOM 操作非常慢——你可以通过不同的方式来改进它们

2：一点一点下载你的数据。当用户滚动您的页面时，再进行一次 AJAX 调用以获取下一部分数据。

3：下载所有数据，但一次只渲染一个页面。

于 2013-06-14T08:10:51.663 回答
0

您可能还想看看这个：https ://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment?redirectlocale=en-US&redirectslug=DOM%2Fdocument.createDocumentFragment

它允许您创建 DOM 的大部分而不添加它们。这样您就可以一次构建表格并将其附加到 DOM 中，应该比一直附加行快得多

于 2013-06-14T08:21:08.800 回答