Question

I am a jquery newbie and have been adding alert timestamps into my html file to find what lines of code are making things slow. I have found the main bottleneck and am looking for help to know how to change these 2 lines to be faster.

My html file has about 600 list items in it. If the file only had 6 list items, the speed would be fine.

    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 updates are the slowest, so if you can store them and insert in one go, at the end, it would be much faster.

Your $("#labelID"+val4).text(...) is probably the slowest part of the code. Build this up as a string and insert it once, out of the loop.