3

jQuery を使用してスプレッドシート エディターを構築していますが、大きなテーブルでパフォーマンスの問題が発生しています。テーブルには多くのデータ セットが含まれており、1 つをクリックすると、他のセットの最初のセルにアイコンが追加されます。コードは次のようになります。 

$('.click_icon').remove();
for (var i = 0; i < datasets.length; i++) {
  var first_cell = $('td.content[dataset="' + datasets[i].id + '"]').filter(':first');
  if (in_group(datasets[i].id)) {
    first_cell.append('<i class="icon-remove click_icon remove_group" style="float:right"></i>');
  } else {
    first_cell.append('<i class="icon-magnet click_icon add_group" style="float:right"></i>');
}

500 以上のデータセットの場合、これには約 5 秒かかります。in_group()セットが選択されたデータセットのグループにあるかどうかをチェックする小さな関数です。

クリックする前にアイコンを作成して使用show() hide()する方が速いかどうか疑問に思っていましたか? 他のアイデアはありますか？

UbuntuでChromiumを使用しています。(バージョン 28.0.1500.52 Ubuntu 12.04)

4

3 に答える 3

3

メモリ内にテーブルを構築し、DOM を 1 回だけ変更します。

$('.click_icon').remove();
var table = $('table');
var clone = table.clone(true);

for (var i = 0; i < datasets.length; i++) {
  var _class = in_group(datasets[i].id) ? 
                     'icon-remove click_icon remove_group' : 
                     'icon-magnet click_icon add_group',
      elem   = $('<i />', {'class': _class, style:'float:right'});

  $('td.content[dataset="' + datasets[i].id + '"]', clone).filter(':first')
                                                          .append(elem);
}

table.replaceWith(clone);

これは一般的な例です。マークアップで適切に機能させるには、これを調整する必要がある場合があります。
私は通常、パフォーマンスのためにプレーンな JS と documentFragments を使用しますが、jQuery はこの方法で内部的にフラグメントを使用すると思います。

于 2013-07-05T15:30:43.670 に答える
0

私の経験では、文字列ごとに要素を追加することは、DOM によって要素を作成するよりもパフォーマンスが最悪です。

だから、次のようなことを試してください：

if (in_group(datasets[i].id)) {
   var i = document.createElement('i');
   i.className = 'icon-remove click_icon remove_group';
   i.style.float = 'right';
   first_cell.appendChild(i);
}
于 2013-07-05T15:26:44.903 に答える
0

ユーザーがクリックすることが予想される場合は、クリックする前にアイコンを作成することをお勧めします。

表示プロパティを切り替える show/hide の代わりに、 visibility プロパティを使用できます。可視性が非表示から表示に変更された場合、ブラウザーはレイアウトを再計算する必要はありません。

于 2013-07-05T15:55:29.240 に答える