javascript - javascript性能中动态创建大型html表

Question

我有一个用于数据分析的应用程序，但在创建表时遇到了一些性能问题。数据是从文档中提取的，重要的是所有数据都显示在一页上(不幸的是分页不是一个选项)。

使用 jQuery，我向服务器发出 ajax 请求以检索数据。完成请求后，我将数据传递给输出函数。输出函数使用 for 循环循环遍历数据数组，并将行连接到变量。循环完成后，包含表的变量将被附加到页面上的现有 div，然后我继续将事件绑定(bind)到表以处理数据。

对于少量数据(约 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 every 循环，但后来切换到 for 循环，这节省了一些时间。

我考虑使用像 google gears 这样的东西来尝试卸载一些处理(如果在这种情况下可能的话)。

有什么想法吗？

Answer 1

加入嗨，

渲染是一个问题，但在循环内连接如此多的字符串也存在问题，特别是当字符串变得非常大时。最好将字符串放入数组的各个元素中，然后最终使用“join”一次性创建巨大的字符串。例如

var r = new Array();
var j = -1, recordId;
r[++j] =  '<table><thead><tr><th>ID</th><th>Status</th><th>Name</th><th>Actions</th><th>Origin</th></tr></thead><tbody>'; 
for (var i in data){
    var d = data[i];
    recordId = d.id;
    r[++j] = '<tr id="';
    r[++j] = recordId;
    r[++j] = '" class="';
    r[++j] = d.status;
    r[++j] = '"><td width="1%" align="center">';
    r[++j] = recordId;
    r[++j] = '</td><td width="1%" align="center"><span class="status" rel="';
    r[++j] = recordId;
    r[++j] = '"><strong>';
    r[++j] = d.status;
    r[++j] = '</strong></span></td><td width="70%"><span class="name">';
    r[++j] = d.name;
    r[++j] = '</span></td><td width="2%"><input type="button" class="failOne" rev="';
    r[++j] = recordId;
    r[++j] = '" value="F"><input type="button" class="promoteOne" rev="';
    r[++j] = recordId;
    r[++j] = '" value="P"></td><td width="1%">';
    r[++j] = d.origin;
    r[++j] = '</td></tr>';
}
r[++j] = '</tbody></table>';
$('#documentRows').html(r.join(''));

另外，我会使用此处显示的数组索引方法，而不是使用“push”，因为根据this article，对于除 Google Chrome 之外的所有浏览器来说，它的速度更快。 .