我有一个用于数据分析的应用程序，我在创建表格时遇到了一些性能问题。数据是从文档中提取的，在一页上呈现所有数据非常重要（不幸的是，无法使用分页）。
使用jQuery，我发出ajax请求来检索数据。请求完成后，我将数据传递给输出函数。输出函数使用for循环遍历数据数组并将行连接到变量中。循环完成后，包含表格的变量被附加到页面上的现有div上，然后我继续为表格绑定事件以处理数据。
对于小型数据集（~1000-2000行），它可以正常运行，但某些数据集包含超过10,000行，这会导致Firefox崩溃或变得无响应。
我的问题是，是否有更好的方法来完成我正在做的事情？
下面是一些代码：
使用jQuery，我发出ajax请求来检索数据。请求完成后，我将数据传递给输出函数。输出函数使用for循环遍历数据数组并将行连接到变量中。循环完成后，包含表格的变量被附加到页面上的现有div上，然后我继续为表格绑定事件以处理数据。
对于小型数据集（~1000-2000行），它可以正常运行，但某些数据集包含超过10,000行，这会导致Firefox崩溃或变得无响应。
我的问题是，是否有更好的方法来完成我正在做的事情？
下面是一些代码：
//This function gets called by the interface with an id to retrieve a document
function loadDocument(id){
$.ajax({
method: "get",
url: "ajax.php",
data: {action:'loadDocument',id: id},
dataType: 'json',
cache: true,
beforeSend: function(){
if($("#loading").dialog('isOpen') != true){
//Display the loading dialog
$("#loading").dialog({
modal: true
});
}//end if
},//end beforesend
success: function(result){
if(result.Error == undefined){
outputDocument(result, id);
}else{
<handle error code>
}//end if
if($('#loading').dialog('isOpen') == true){
//Close the loading dialog
$("#loading").dialog('close');
}//end if
}//end success
});//end ajax
};//end loadDocument();
//Output document to screen
function outputDocument(data, doc_id){
//Begin document output
var rows = '<table>';
rows += '<thead>';
rows += '<tr>';
rows += '<th>ID</th>';
rows += '<th>Status</th>';
rows += '<th>Name</th>';
rows += '<th>Actions</th>';
rows += '<th>Origin</th>';
rows += '</tr>';
rows += '</thead>';
rows += '<tbody>';
for(var i in data){
var recordId = data[i].id;
rows += '<tr id="' + recordId + '" class="' + data[i].status + '">';
rows += '<td width="1%" align="center">' + recordId + '</td>';
rows += '<td width="1%" align="center"><span class="status" rel="' + recordId + '"><strong>' + data[i].status + '</strong></span></td>';
rows += '<td width="70%"><span class="name">' + data[i].name + '</span></td>';
rows += '<td width="2%">';
rows += '<input type="button" class="failOne" rev="' + recordId + '" value="F">';
rows += '<input type="button" class="promoteOne" rev="' + recordId + '" value="P">';
rows += '</td>';
rows += '<td width="1%">' + data[i].origin + '</td>';
rows += '</tr>';
}//end for
rows += '</tbody>';
rows += '</table>';
$('#documentRows').html(rows);
我最初使用了 jQuery 的 each 循环，但后来改用 for 循环，这样可以减少一些毫秒。
我考虑使用类似 Google Gears 的东西来尝试卸载一些处理工作（如果在这种情况下可能的话）。
有什么想法？