Динамическое создание большой таблицы html с производительностью javascript

У меня есть приложение, которое используется для анализа данных, и у меня есть несколько проблем с производительностью при создании таблицы. Данные извлекаются из документов, и важно, чтобы все данные были представлены на одной странице (к сожалению, разбивка на страницы не является вариантом).

Используя 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, но переключился на цикл for, который сократил несколько миллисекунд.

Я подумал об использовании чего-то вроде шестеренок Google, чтобы попытаться разгрузить часть обработки (если это возможно в данном сценарии).

Есть мысли?