Question

我正在整理＆lt; li＆gt;的列表元素。我在页面上调整了一个功能，我现在无法链接。您可以看到实际网站here。单击“排序和过滤”，然后单击任何排序方法（英文名称，材料，状态...）。所有种类都基本相同，因此CPU时间是相同的。

我的jQuery函数如下所示：

jQuery.fn.sort = function() {
    return this.pushStack([].sort.apply(this, arguments), []);
};
  function sortAscending1(a, b)  { return $(a).find(".english").text() > $(b).find(".english").text() ? 1 : -1; };  
  function sortDescending1(a, b)  { return $(a).find(".english").text() < $(b).find(".english").text() ? 1 : -1; };

我从以下jQuery行调用它（s_alf_eng是页面上的一个clicable div）。

$(document).ready(function() {
    $(".s_alf_eng").toggle(
        function() {
            $('.media-status-specie li').sort(sortAscending1).appendTo('.media-status-
        },
        function() {
            $('.media-status-specie li').sort(sortDescending1).appendTo('.media-status-specie');
        });

我可以快速提供任何额外的澄清。谢谢！

编辑：问题是对大型列表执行此排序需要几秒钟。在我的core2duo中，它可能需要长达20秒！我将find（“。english”）更改为filter（“。english”），速度似乎相同。关于如何提高速度的任何想法？

Answer 1

在列表的内存中复制并对其进行排序，然后将现有列表替换为已排序的列表。这比操纵实时，可见的DOM元素要快。

Answer 2

我认为如果你将名称作为元数据添加到节点并消除在每次比较中浏览DOM，它会更快。记住，毕竟它们都是O（n ²）。

$(function() { 
    $('.media-status-specie li')
        .each(function () {
            $(this).data('name', $(this).find(".english").text());
        })
});

.... 

function sortDescending1(a, b)  { 
    return $(a).data('name') < $(b).data('name') ? 1 : -1; 
}

免责声明：我认为，我不擅长猜测任何其他开发人员的慢点，使用探查器来寻找真正的性能杀手。

jQuery排序函数性能

2 个答案: