jqueryのインデックスリストの読み込み速度が速くなります

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フラグメントに構築し、完全なコンテンツを1回追加するだけの価値があります。