Question

我是一个jquery新手，并且已经将警报时间戳添加到我的html文件中，以查找哪些代码行使事情变得缓慢。我找到了主要的瓶颈，我正在寻求帮助，知道如何更快地改变这两条线。

我的html文件中包含大约600个列表项。如果文件只有6个列表项，速度就可以了。

    var visablecount = 0;
    var totalcount = 0;
    for (var key in checkArray) {
        if (checkArray.hasOwnProperty(key)) {
            $tmp = key.split(" ");
            $.each($tmp, function(i, val4) {            
                //*********next two lines are the most slow lines*********
                visablecount = $itemsToFilter.children("li."+val4+":visible").length;
                totalcount = $itemsToFilter.children("li."+val4+":hidden").length + visablecount;
                //********************************************************
                $("#labelID"+val4).text(val4 +" (" + visablecount + "/" + totalcount + ")");
                if ($this.is(":checked")) {
                    if ($('.' + val4 + '').is(":visible") == true) {                            
                        $('.filters input[value=' + val4 + ']').attr('checked', true);                          
                    }
                }
            });
        }
    }

Answer 1

DOM更新是最慢的，所以如果你可以存储它们并一次插入，那么它会更快。

您的$("#labelID"+val4).text(...)可能是代码中最慢的部分。将其构建为一个字符串并将其插入循环中一次。

Answer 2

我做了一些小改动。请试一试，让我知道它是怎么回事，

var visablecount = 0;
var totalcount = 0;
var childVisibleLi = $itemsToFilter.children("li:visible");
var childHiddenLi = $itemsToFilter.children("li:hidden");

for (var key in checkArray) {
   // if (checkArray.hasOwnProperty(key)) { //<-- You don't need it when you iterate over key
        $tmp = key.split(" ");
        $.each($tmp, function(i, val4) {            
            //*********next two lines are the most slow lines*********
            visablecount = childVisibleLi.filter("."+val4).length;
            totalcount = childHiddenLi.filter("."+val4).length + visablecount;
            //********************************************************

            $("#labelID"+val4).text(val4 +" (" + visablecount + "/" + totalcount + ")");
            if ($this.is(":checked")) {

         //  below if can be changed.. use filter instead of directly using .class

                if ($('.' + val4 + '').is(":visible") == true) {                            
                    $('.filters input[value=' + val4 + ']').attr('checked', true);                          
                }
            }                
        });
    //}
}

Answer 3

只看你的慢线，你可以避免两次执行.children(...)选择器。相反，缓存.children(...)的结果并回避执行添加的需要，如下所示：

//********* replacement for the slow lines ********
$foo = $itemsToFilter.children("li." + val4);
visablecount = $foo.is(":visible").length;
totalcount = $foo.length;
//*************************************************

注意：$ foo应根据visablecount和totalcount在循环外声明。

更快地查找可见/隐藏列表项的长度

3 个答案: