javascript - 浏览器在呈现数据以创建表格时无响应

Question

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

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

我正在使用此循环遍历所有元素并创建 tr 并使用数据填充所有 td。

我面临的问题是因为数据量很大。循环花费了大量时间，最终浏览器显示没有响应，我不得不终止页面。

如何解决这个问题？

Answer 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