Question

我有一个表，使用Ajax调用每隔几秒更新一次。当有几千件物品时，桌子变得非常反应迟钝。主要的瓶颈是Tablesorter.js更新表（重新应用过滤器，排序和分页），这是可以理解的，因为它有很多要处理的数据。

我通过缓存返回的最后一个对象数组，然后使用下划线将其与接收到的新对象进行比较，并且只有在时尚的情况下进行更改时才更新表格，从而提高了性能....

var cachedJobData;

$.ajax({
    type : 'GET',
    cache : false,
    url : '/jobs',
    success : function(data){
        console.log(GetNow() + ' got data');
        Items = data;

        if(_.isEqual(Items, cachedJobData)){
            console.log("DATA THE SAME");
        }
        else{
            console.log("DATA DIFFERENT!!!!!!!!!!!!!!!!!!");
            rebuildTable();
        }

        cachedJobData = data;
    },
    error: function(Xhr, status, error){
        toastr.error('Error getting job list - ' + error);
    },
    always:function(data){
        if(data.loginResult === 'false'){
            onLoggedOut();
        }
    }
});

function rebuildTable()
{
    var tbl_body = "";
    $.each(Items, function(index, item){
        tbl_body += makeRow(item);
    }); 
    $("#dbTable tbody").html(tbl_body);

    $("table").trigger("update");
}

...这比以前好多了，并且大大提高了性能，但我认为它可能会更好。

当Tablesorter使用$("table").trigger("update")更新5000行（每个包含12个单元格）的表时，它往往需要几秒钟，而且此时页面没有响应。

我的问题是，我该如何改进？我想到的一件事是在当前和缓存的数组中单独查找每个对象，并将任何差异推送到另一个数组，这样我最终得到一个'update'数组，然后通过查找每一行将其应用到表中我存储的ID字段，然后告诉Tablesorter只更新这些行。这看起来很麻烦。

我希望最终能够使用Angular，但这是一个陡峭的学习曲线，可以实现Tablesorter在外观，过滤，排序和分页方面提供的相同功能。

存在被标记为非建设性问题的风险 - 任何建议？

JQuery＆amp; Tablesorter - 提高性能 - 仅更新已更改的数据

0 个答案: