jquery可选插件非常慢答案

【问题标题】：jquery's selectable plugin's very slowjquery可选插件非常慢
【发布时间】：2011-05-20 21:33:08
【问题描述】：

在大型列表等上使用时速度很慢。如何让它变快？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-selectable

【解决方案1】：

对于一个非常大的列表也有同样的问题，最终处理悬停事件并为每一行调用 .selectable() 。这为我解决了这个问题。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

【解决方案2】：

如果你有一个巨大的列表，你会想要像这样禁用昂贵的autoRefresh option：

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

当你想要时（比如stop）你可以刷新自己，像这样：

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

【讨论】：

【解决方案3】：

我发现 jquery.selectable 在旧浏览器（如 IE7 和 8）中非常慢，因为它必须在每个项目上调用 .offset() 方法。我在表格中的单元格上使用它，因此我能够通过修改版本将 .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

【讨论】：

【解决方案4】：

我知道这已经晚了几年，但我一直试图在 50x100 的桌子上获得可选择的感觉。

我发现，如果我在插入表格内容之前在表格的容器 div（使用filter:'td'）上创建可选择项，它会运行得非常快。在 Firefox 中，它在大约 1 毫秒内实例化（相比之下，在预先存在的内容上创建它时大约 100 毫秒）。

【讨论】：

【解决方案5】：

jQuery UI selectable 采用 DOM 结构的所有元素，将元素的数量限制为顶部的元素。添加过滤器：

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

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

【讨论】：

【解决方案6】：

与其他 jquery ui 方法不同，选择器甚至应用于嵌套元素。仅选择直接祖先使用：

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

【讨论】：