渲染数据以创建表时浏览器没有响应答案

【问题标题】：browser not responding while rendering data to create table渲染数据以创建表时浏览器没有响应
【发布时间】：2013-06-14 08:06:11
【问题描述】：

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

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

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

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

如何解决这个问题？

【问题讨论】：

en.wikipedia.org/wiki/Pagination.
我必须和我一起处理整个数据。之后如何添加分页。我没有选择再次向服务器发送查询以获取下一组数据。
除了使用分页之外，当你还想添加很多项时，请确保将它们全部添加到内存中的一张表中，然后将一张表添加到dom中，而不是多次添加一行到dom。
@RenéWolferink 你能否在这一点上更清楚一点。如何做到这一点。谢谢

标签： javascript jquery html css loops

【解决方案1】：

这里有几件事要说。

首先，如上所述，分页绝对是解决此问题的最佳解决方案。在内存中保留 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

【讨论】：

我的示例使用 jQuery 的原因是它是问题中的标签之一。如果您愿意，也可以使用普通的旧 javascript，@donnywals 提供了一个很好的链接。

【解决方案2】：

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

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

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

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

【讨论】：

不，我没有向服务器发送另一个查询的选项。我可以发送一次查询，我会及时收到所有查询。
好的——下载所有数据，然后只渲染你需要显示的部分——分页。你能发布创建页面的代码吗？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

不是从服务器请求数据来进行分页，而是从“本地”数组中获取数据。

【讨论】：