Question

我有一个显示数据库中所有记录的函数。它完全正常工作，但问题是当记录超过100或高达1000等等时，它将需要至少7到10秒才能显示。怎么能让它更快。这是我使用jquery的代码。

$('document').ready(function(){
    $('.datainfo').show();
    $.getJSON('/dev/api/rrlist?cb=' + session_id, function(results){
        result(results);
        $('.datainfo').hide();
        var items = $("table.table tbody tr");
        var numItems = items.length;
        var perPage = 15;
        items.slice(perPage).hide();
        dothings(items, numItems, perPage);
    })
});

function result(results){
$.each(results, function(key, value){
$('table.table tbody').append('<tr> \
                <td><a href="/operations/purchase/'+value.id+'/showPurchaseReceiving">'+pad(value.id,8)+'</a></td> \
                <td>'+value.rr_date+'</td> \
                <td class="cuts">'+value.partner['name']+'</td> \
                <td class="cuts">'+(value.cb == 0 ? 'Head Office' : value.trans['name'])+'</td>\
                '+(! value.branch ? '<td></td>' : '<td class="cuts">'+value.branch['name']+'</td>')+' \
                <td style="text-align:right;">'+parseFloat(value.total_amt).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2})+' '+value.deskpadcurrency['curr_code']+'</td> \
                <td style="text-align:center;">New</td> \
                </tr>');
})
}

function dothings(items, numItems, perPage){
    $(".pagination").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        hrefTextPrefix: '#',
        onPageClick: function(pageNumber){
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide()
            .slice(showFrom, showTo).show();
        }
    });
}

Answer 1

这也可能是渲染性能问题。您可以使用内置的浏览器开发人员工具检查页面性能。查找布局，重新计算样式或其他计数器。

您可以通过添加“table-layout：fixed”样式并设置显式列宽来加快表格渲染。

另外值得尝试将表内容构建为字符串html片段，并且仅在完整内容后附加一次。

索引列表在jquery中加载速度更快

1 个答案: