jqueryの選択可能なプラグインが非常に遅い

Question

巨大なリストなどで使用すると速度が遅くなります。

Answer 1

あなたは巨大なリストを持っている場合は、あなたがこのような高価なautoRefresh optionを無効にすることをお勧めします：

$(".mySelector").selectable({ autoRefresh: false }); 

あなたは（stopに言う）したいときはこのように、自分自身をリフレッシュすることができます。

$(".mySelector").selectable("refresh"); 

Answer 2

他のjquery UIメソッドとは異なり、セレクタはネストされた要素にも適用されます。唯一の直接の祖先を選択することが使用します。

jQuery('#content').selectable({ 
filter: '>*', 
}); 

Answer 3

のjQuery UIの選択は、トップにあるものに要素の数を制限し、DOM構造のすべての要素を取ります。フィルタを追加します。

$("#items").selectable({filter: 'li'}); 

http://forum.jquery.com/topic/major-performance-problems-with-selectable

Answer 4

私は古いブラウザでは非常に遅いjquery.selectableであることがわかった（IE7のようなおよび8）、それは各項目の.offset（）メソッドを呼び出す必要があるため。私はテーブル内のセルでそれを使用していたので、各行に対して1つずつ（各セルごとに1つの呼び出しではなく）1つの.offset（）呼び出しを減らすことができました。リフレッシュ機能が変更されたプラグイン。これにより、大規模なテーブルではパフォーマンスが許容されました。 cellPositions配列は、各列の水平位置を保持します。

 this.refresh = function() { 
      var cellPositions = []; 
      var firstRow = true; 
      selecteeRows = $("tr", self.element[0]); 
      selecteeRows.each(function() { 
       var row = $(this); 
       // adding any filters here seems to slow down IE a lot 
       // self.options.filter is not used!! 
       var selecteeCells = $(row).find("td"); 
       if (firstRow && selecteeCells.length > 0) { 
        for (var i = 0; i < selecteeCells.length; i++) { 
         cellPositions[i] = $(selecteeCells[i]).offset().left; 
        } 
        cellPositions[selecteeCells.length] = cellPositions[selecteeCells.length - 1] + $(selecteeCells).outerWidth(true); 
        firstRow = false; 
       } 
       if (selecteeCells.length > 0) { 
        var top = $(selecteeCells).first().offset().top; 
        var bottom = top + $(selecteeCells).first().outerHeight(); 
        var i = 0; 
        selecteeCells.each(function() { 
         var $this = $(this); 
         first = false; 
         $.data(this, "selectable-item", { 
          element: this, 
          $element: $this, 
          left: cellPositions[i], 
          top: top, 
          right: cellPositions[i + 1], 
          bottom: bottom, 
          startselected: false, 
          selected: $this.hasClass('ui-selected'), 
          selecting: $this.hasClass('ui-selecting'), 
          unselecting: $this.hasClass('ui-unselecting') 
         }); 
         i++; 
        }); 
       } 
      }); 

     }; 

編集：ここでははgithubの内のコードへのリンクです：https://github.com/dfjackson/jquery.ui.selectableTable

Answer 5

私はこれが遅すぎる年のカップルですけど、私は50x100で選択可能な感てきぱきを取得しようとしてきました表。

テーブルコンテンツを挿入する前にテーブルのコンテナdiv（filter:'td'）で選択可能なアイテムを作成すると、超高速で実行されることがわかりました。 Firefoxでは、それは約1msでインスタンス化していました（既存のコンテンツで作成する場合は約100回でした）。