У меня есть приложение, которое используется для анализа данных, и у меня возникли некоторые проблемы с производительностью при создании таблицы. Данные извлекаются из документов, и важно, чтобы все данные были представлены на одной странице (разбиение на страницы, к сожалению, не вариант).
Используя jQuery, я делаю ajax-запрос к серверу для получения данных. По завершении запроса я передаю данные в функцию вывода. Функция вывода проходит по массиву данных, используя цикл for, и объединяет строки в переменную. Когда цикл завершен, переменная, содержащая таблицу, добавляется к существующему элементу div на странице, а затем я продолжаю связывать события с таблицей для работы с данными.
С небольшим набором данных (~ 1000-2000 строк) он работает относительно хорошо, но некоторые из наборов данных содержат более 10000 строк, что приводит к сбою и закрытию 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 для каждого цикла, но переключился на цикл for, который сбрил несколько мс.
Я думал об использовании чего-то вроде google gears, чтобы попытаться разгрузить часть обработки (если это возможно в этом сценарии).
Есть мысли?